🚀 Understanding Event Handling in React — Simplified! In React, user interactions drive everything. 👉 Clicking a button 👉 Typing in input 👉 Submitting a form All of this is handled through events. 💡 What is Event Handling in React? Event handling allows you to respond to user actions using functions. <button onClick={handleClick}>Click Me</button> 👉 When clicked → handleClick runs ⚙️ How it works function App() { const handleClick = () => { console.log("Button clicked!"); }; return <button onClick={handleClick}>Click</button>; } ✅ Pass function reference (not function call) ✅ React handles binding automatically 🧠 Key Differences from HTML 🔹 HTML: <button onclick="handleClick()">Click</button> 🔹 React: <button onClick={handleClick}>Click</button> 👉 CamelCase events 👉 Pass functions, not strings 🧩 Common Events in React ✔ onClick → Button click ✔ onChange → Input change ✔ onSubmit → Form submit ✔ onMouseEnter / onMouseLeave ✔ onKeyDown / onKeyUp 🔥 Best Practices (Most developers miss this!) ✅ Always pass function reference ✅ Use arrow functions when needed ✅ Keep handlers clean and reusable ❌ Don’t call function directly in JSX ⚠️ Common Mistake // ❌ Wrong <button onClick={handleClick()}> 👉 This runs immediately instead of on click 💬 Pro Insight React uses a Synthetic Event system: 👉 Normalizes events across all browsers 👉 Improves performance and consistency 📌 Save this post & follow for more deep frontend insights! 📅 Day 9/100 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #SoftwareEngineering #100DaysOfCode 🚀

I launched Weather Dashboard 🌤️, an interactive web application designed to display weather data in a fast, clear, and user-friendly way. The project was built using React + TypeScript + Vite, with WeatherAPI for real-time data fetching. The application allows users to search for any city with instant suggestions, or select a location directly from the map to get weather data based on coordinates. It provides current weather conditions, hourly forecasts, and a 7-day forecast, along with detailed information such as temperature, rain probability, wind speed, humidity, pressure, visibility, and sunrise/sunset times. It also includes interactive charts 📊 to visualize temperature trends, rain intensity, and wind speed, making the data easier to understand at a glance. The goal of this project was to build a clean, structured, and efficient interface that delivers a smooth and intuitive user experience. 🔗 Live Demo (Vercel): [https://lnkd.in/deuUKU8v] #ReactJS #TypeScript #FrontendDevelopment #Vite #WeatherApp #JavaScript #UIUX #APIs #FrontendEngineer

🚀 Understanding useRef in React — Simplified! Not all data in React should trigger a re-render. 👉 That’s where useRef becomes powerful. 💡 What is useRef? useRef is a hook that lets you store a mutable value that persists across renders—without causing re-renders. ⚙️ Basic Syntax const ref = useRef(initialValue); 👉 Access value using: ref.current 🧠 How it works Value persists across renders Updating it does NOT trigger re-render Works like a mutable container 🔹 Example const countRef = useRef(0); const handleClick = () => { countRef.current += 1; console.log(countRef.current); }; 👉 UI won’t update—but value persists 🧩 Real-world use cases ✔ Accessing DOM elements (focus, scroll) ✔ Storing previous values ✔ Managing timers / intervals ✔ Avoiding unnecessary re-renders 🔥 Best Practices (Most developers miss this!) ✅ Use useRef for non-UI data ✅ Use it for DOM access ✅ Combine with useEffect when needed ❌ Don’t use useRef for UI state ❌ Don’t expect UI updates from it ⚠️ Common Mistake // ❌ Expecting UI update countRef.current += 1; 👉 React won’t re-render 💬 Pro Insight 👉 useRef = Persist value without re-render 👉 useState = Persist value with re-render 📌 Save this post & follow for more deep frontend insights! 📅 Day 14/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #useRef #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

My React News Dashboard Project This project focuses on building a dynamic web application using React and integrating real-time data through APIs. It allows users to search for news articles and browse category-based headlines with a clean and responsive interface. Key features: • Real-time news fetching using GNews API • Search functionality and category-based filtering • Dynamic routing for detailed article view • Loading and error handling for better user experience • Clean UI built using Material UI Through this project, I worked on: • API integration and asynchronous data handling • State management using React hooks • Component-based architecture • Building responsive and user-friendly interfaces GitHub Repo:https://lnkd.in/dksBZWPF #ReactJS #WebDevelopment #JavaScript #API #FrontendDevelopment #LearningJourney

🚀 Understanding useRef vs useState in React — Simplified! If you're working with React, knowing when to use useRef vs useState can directly impact your app’s performance and rendering behavior. 💡 What is the difference? Both store data across renders—but behave very differently: 🔹 useState → Triggers re-render 🔹 useRef → Does NOT trigger re-render ⚙️ How it works 👉 useState: Stores reactive data Causes component to re-render when updated const [count, setCount] = useState(0); setCount(count + 1); // UI updates 👉 useRef: Stores mutable value Persists across renders Does NOT trigger re-render const countRef = useRef(0); countRef.current += 1; // No UI update 🧠 Real-world use cases ✔ useState: UI state (forms, toggles, counters) Anything that affects rendering ✔ useRef: Accessing DOM (focus, scroll) Storing previous values Managing timers / intervals Avoiding unnecessary re-renders 🔥 Best Practices (Most developers miss this!) ✅ Use useState for UI-driven data ✅ Use useRef for non-visual/mutable values ✅ Use refs to store previous state values ❌ Don’t use useRef when UI needs to update ❌ Don’t overuse state for everything ⚠️ Common mistake // ❌ Wrong approach countRef.current += 1; // UI won't update 👉 If UI depends on it → useState 💬 Pro Insight The real difference is: 👉 useState = Reactive data (triggers render) 👉 useRef = Non-reactive data (no render) 📌 Save this post & follow for more deep frontend insights! 📅 Day 5/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #PerformanceOptimization #SoftwareEngineering #100DaysOfCode 🚀

Excited to share my latest project — a full-featured Weather App built with React! This project helped me deepen my understanding of browser APIs, async data fetching, and clean UI design. 🛠️ Built with: • React & Bootstrap 5 • Open-Meteo & Nominatim APIs • Geolocation API 🌟 Key Features: • City search with debounced input • Current location detection • Hourly & 7-day forecasts • Sunrise/sunset, UV index, wind & pressure data 🔗 Live: https://lnkd.in/gBYT_8HZ 💻 Code: https://lnkd.in/g5AcZG-r Feedback is always welcome — happy to connect with fellow developers! #React #JavaScript #WebDev #Frontend #Programming

The TanStack Query loading trap you should avoid Ever seen a loading spinner that never stops when you're offline? This usually happens when you rely only on isPending. What’s happening behind the scenes: - First load (no cache) + user goes offline - Query gets paused, not failed: isPending = true, fetchStatus = 'paused' - UI keeps showing a spinner Problem: Checking only isPending results in the user being stuck on a loader with no explanation. Solution 1: Check both isPending and fetchStatus. This allows you to show a specific "Offline" message instead of a generic spinner. Solution 2: Control network behavior by updating global config: networkMode: 'always' This forces queries to run even when offline (no pause state) It is a small detail, but handling these edge cases makes a huge difference in providing a polished user experience. Thanks to JavaScript Mastery, Hitesh Choudhary, RoadsideCoder.com, Traversy Media, freeCodeCamp for sharing such valuable content for Frontend production-grade applications. #TanStackQuery #ReactQuery #WebDevelopment #Frontend #JavaScript #ReactJS

🌤️ Weather App – Now Live A real-time weather application that provides current conditions and a 5-day forecast for any city. ✨ Features: • Live weather data • Interactive map • Dark/Light mode • °C / °F toggle • Fully responsive 🛠️ Tech Stack: HTML / CSS / JavaScript OpenWeatherMap API Leaflet Maps 🔗 Live Demo: https://lnkd.in/duRKsUdZ #WebDevelopment #JavaScript #WeatherApp #Frontend

🚀 Understanding Props vs State in React — Simplified! In React, everything revolves around data. But there are two ways to handle it: 👉 Props 👉 State Understanding the difference is crucial for building scalable apps. 💡 What are Props? 👉 Props (short for properties) are used to pass data from parent to child function Greeting({ name }) { return <h1>Hello {name}</h1>; } <Greeting name="React" /> ✅ Read-only ✅ Passed from parent ✅ Cannot be modified by child 💡 What is State? 👉 State is data managed inside a component const [count, setCount] = useState(0); setCount(count + 1); ✅ Mutable ✅ Managed within component ✅ Triggers re-render ⚙️ How it works 🔹 Props: Flow: Parent → Child Immutable Used for communication 🔹 State: Local to component Can be updated Controls UI behavior 🧠 Real-world use cases ✔ Props: Passing data to components Reusable UI components Configuring child behavior ✔ State: Form inputs Toggle UI (modals, dropdowns) Dynamic data 🔥 Best Practices (Most developers miss this!) ✅ Use props for passing data ✅ Use state for managing UI ✅ Keep state minimal and local ❌ Don’t mutate props directly ❌ Don’t duplicate state unnecessarily ⚠️ Common Mistake // ❌ Mutating props props.name = "New Name"; 👉 Props are read-only → always treat them as immutable 💬 Pro Insight 👉 Props = External data (controlled by parent) 👉 State = Internal data (controlled by component) 📌 Save this post & follow for more deep frontend insights! 📅 Day 8/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

🚫 Can we use useState without re-render in React? Short answer: No. You can’t. 🧠 Why? useState is designed to: 👉 Update data 👉 Trigger re-render const [count, setCount] = useState(0); setCount(1); // ✅ Always causes re-render There’s no way to “silently” update state. ⚠️ Common misconception “Use useState but avoid re-render like useRef” 👉 That’s not possible — it goes against how React works. 💡 What should you do instead? If your goal is: ✅ Store value without re-render Use useRef const countRef = useRef(0); countRef.current += 1; // ❌ No re-render ✅ Reduce unnecessary re-renders (not eliminate) ✔ Update only when value changes if (value !== newValue) { setValue(newValue); } ✔ Split components (localize state) ✔ Use React.memo for child components ✔ Use useMemo / useCallback for stability 🔥 Key takeaway useState → triggers re-render ✅ useRef → no re-render ❌ You choose based on UI vs non-UI data 💡 Rule of thumb: If UI should update → useState If UI should NOT update → useRef #ReactJS #Frontend #JavaScript #ReactHooks #WebDevelopment #InterviewPrep