React Component Re-Rendering: Causes and Fixes

🚀 Day 11 — Understanding State vs Props in React Today I revised a core React concept — State vs Props. At first, both felt similar, but while building components I understood the difference clearly. Props • Passed from parent to child • Read-only • Used to share data between components State • Managed inside a component • Can be updated • Controls how the UI behaves Simple understanding I follow: Props → used to pass data State → used to manage data Example: Parent component sends user data as props Child component uses state to manage user interactions (like input, toggle, etc.) This concept is very important because it controls how React applications are structured. Still improving my understanding by using it in projects. #ReactJS #FrontendDevelopment #MERNStack #LearningInPublic

🚀 Day 15/21 – React Props & Dynamic Components Today I explored how to make React components dynamic and reusable using Props. 📚 Key concepts learned: 👉 Props (Properties) – Props allow us to pass data from a parent component to a child component. 👉 Dynamic Components – Instead of hardcoding values, components can receive different data through props and render different UI. 👉 Component Reusability – One component can be reused multiple times with different props. 👉 Props Flow – Data in React flows one-way (Parent → Child) which makes the application easier to manage. Example idea: <ProductCard name="Laptop" price="50000" /> <ProductCard name="Phone" price="20000" /> 💡 Key Learning: Props make components flexible and reusable, which is one of the main reasons React is powerful for building scalable applications. #Day15 #ReactJS #Props #FrontendDevelopment #WebDevelopment #LearnInPublic

I was building a UI recently and something felt off. I added a console.log out of habit. Clicked a button once. Watched the same API call fire 10 to 11 times in a row. One click. Ten requests. I knew React re-renders components when state changes. What I didn't fully appreciate was how easy it is to accidentally create a chain reaction. A state update triggers a render, something inside that render looks "new" to React even when it isn't, and suddenly your useEffect is firing over and over. The fix came down to being more precise: stabilising object references with useMemo, wrapping functions in useCallback, and being honest about what my useEffect actually needed to watch. After fixing it: one click, one API call. It sounds obvious in hindsight. It always does. If you've hit this before, how did you catch it? Console.log is how I found mine. I'm told the React DevTools Profiler is better. That's what I'm learning next. React developers, how do you debug unexpected re-renders in production? #React #Frontend #FrontendDevelopment #ReactJS #WebDevelopment #JavaScript #SoftwareEngineering

If props don’t change, why does a component still re-render? Many developers believe that if the props are the same, the component won’t re-render. However, this isn't always the case. Consider the following example: function Parent() { const [count, setCount] = useState(0); return <Child name="Sajal" />; } In this scenario, even though the name prop never changes, the Child component will still re-render. This happens because when the Parent component re-renders, React re-runs the Child component as well. So, how can we prevent unnecessary re-renders? The solution is to use React.memo. This function tells React to only re-render the component if the props actually change. Here’s how it looks: const Child = React.memo(({ name }) => { console.log("Rendered"); return <div>{name}</div>; }); With this implementation, the Child component will not re-render unless the name prop changes. Key Insight: React re-renders by default, and optimization is something you explicitly control. Important Note: React.memo uses shallow comparison, so objects and functions may still cause re-renders. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #CodingJourney #LearninglnPublic #DeveloperLife #ReactInternals #FrontendEngineer #TechInterview #StateManagement

🚀 Mastering React’s useState Hook with a Simple Counter App! Ever wondered how React components actually re-render when state changes? 🤔 In this video, I break it down in the simplest way possible using a practical Counter App example. 💡 What you'll learn: - How "useState" works behind the scenes - How state updates trigger component re-rendering - The concept of virtual DOM (explained simply) - Best practices while updating state This is a must-watch if you're starting with React or want to strengthen your fundamentals. 🎯 By the end of this video, you'll clearly understand: 👉 When and why components re-render 👉 How React efficiently updates the UI 🔗 Watch now and level up your React basics! #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Coding #ReactHooks #100DaysOfCode https://lnkd.in/gQsQ8WCJ

Day 13: Component Lifecycle in React (Using Hooks) Before Hooks, React had lifecycle methods in class components. Now, with Hooks, we can handle the entire lifecycle using useEffect. 📌 What is Component Lifecycle? Every React component goes through 3 main phases: 1️⃣ Mounting → Component is created and added to the DOM 2️⃣ Updating → Component re-renders when state/props change 3️⃣ Unmounting → Component is removed from the DOM 📌 Handling Lifecycle with useEffect 👉 1. Mounting (Component Did Mount) useEffect(() => { console.log("Component Mounted"); }, []); Runs only once when the component loads. 👉 2. Updating (Component Did Update) useEffect(() => { console.log("Component Updated"); }, [count]); Runs whenever count changes. 👉 3. Unmounting (Component Will Unmount) useEffect(() => { return () => { console.log("Component Unmounted"); }; }, []); Used for cleanup (like clearing timers, removing listeners). 📌 Real-world Example Think of a timer app • Start timer → Mount • Update time → Update • Stop/leave page → Unmount 📌 Why Lifecycle is Important ✅ Prevent memory leaks ✅ Manage API calls properly ✅ Control when code runs ✅ Optimize performance #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic

Spent 2 days debugging why a dropdown caused 47 re-renders. Turns out I didn't actually understand how React renders. Here's what I learned (Day 2 of my frontend system design series): Most devs think render = DOM update. It doesn't. React rendering is just calling your component function. DOM updates only happen if something actually changed. What triggers a re-render: → State changes (useState / useReducer) → Parent re-renders (children always follow) → Context value updates (all consumers re-render) The fix isn't always React.memo. It's understanding WHY the render happened first. Open the React Profiler. Record. Interact. Stop. It shows exactly which components were rendered and how long each took. Found my bug in 3 minutes. Building in public as I go through GreatFrontend's curriculum — follow along if you're leveling up too. #ReactJS #Frontend #WebDev #JavaScript #SystemDesign

🛑 Stop unmounting your components. You’re killing your performance. If you’re a React dev, you’ve written this a million times: {showCounter && <Counter />} It’s the "standard" way to toggle UI. But here is the hidden cost: When showCounter hits false, that component unmounts. 💥 Internal state? Gone. 💥 Scroll position? Reset. 💥 Heavy rendering tree? Destroyed. When the user clicks "Show" again, React has to rebuild everything from scratch. It’s wasteful, and in complex apps, it’s a major performance bottleneck. 🚀 Here enters the Activity API (React 19 / Offscreen) I have analyzed how this changes the game for state preservation. Instead of deleting the component, you wrap it in <Activity> and set the mode to "hidden". The Result: ✅ The DOM is hidden (keeping the browser light). 🧠 The STATE is preserved (React keeps it in memory). ⏳ No "Cold Starts" — Because the component never actually unmounted, your useEffect cleanup doesn't fire. When you toggle back to "visible", the UI reappears instantly exactly where the user left off. This is a game-changer for: • Instant Tab Switching • Background Pre-rendering • Persistent Forms Official Reference: https://lnkd.in/gWeuMKfq . . . #ReactJS #React19 #WebPerformance #FrontendDev #JavaScript #SoftwareEngineering #WebDevelopment