React Mistake: Unnecessary Re-renders with Props

𝗔 𝗦𝘂𝗯𝘁𝗹𝗲 𝗥𝗲𝗮𝗰𝘁 𝗕𝘂𝗴 𝗖𝗮𝘂𝘀𝗲𝗱 𝗯𝘆 𝗦𝘁𝗮𝗹𝗲 𝗦𝘁𝗮𝘁𝗲 Sometimes a bug in React isn’t caused by React itself. It comes from how JavaScript closures work. When you schedule a state update inside an asynchronous callback (like a timeout), that callback captures the value of state from the moment it was created. If the state changes before the callback runs, the update may still use the old value. This can lead to confusing behavior where your UI doesn’t update the way you expect. A safer approach is to use the functional update pattern. Instead of relying on the current state value, React gives you the latest state inside the updater function. This ensures your update always works with the most recent value. 👇 Example comparison below Day 13/100 — sharing practical frontend engineering lessons. Have you ever faced a bug caused by stale state in React? #ReactJS #FrontendEngineering #JavaScript #WebDevelopment #SoftwareEngineering

Ever clicked two dropdowns and both stayed open at the same time? 😾 Looks unprofessional. Feels broken. Users hate it. Here is how I fixed it in React with just 2 lines : 👉 When Explore opens → force "Degree" dropdown to close onClick={() => {  setIsExploreMenuOpen(!isExploreMenuOpen);  setIsDegreeMenuOpen(false); // ← this one line does it }} 👉 When Degree opens → force "Explore" dropdown to close onClick={() => {  setIsDegreeMenuOpen(!isDegreeMenuOpen);  setIsExploreMenuOpen(false); // ← same idea }} The logic is simple: When you open something → explicitly close everything else. React does not do this automatically. You have to tell it exactly what to close. Small detail. Big difference in user experience. #react #nextjs #javascript #webdevelopment #tailwindcss #buildinpublic #frontenddevelopment

🧠 React Doesn’t Re-render Because State Changed We’ve all heard this: “React re-renders when state changes.” Sounds correct. But it’s not the full truth. 🔍 What actually triggers a re-render? React re-renders when: 👉 You call a state setter (setState) Not when the value “changes”. Example const [count, setCount] = useState(0); setCount(0); Even though the value is the same… 👉 React may still schedule a render. Why? Because React doesn’t first check: “Did the value change?” It reacts to: “Did you ask for an update?” 🧠 So what happens next? React does a quick comparison (Object.is) If the value is the same: 👉 It bails out and skips unnecessary DOM updates But the render phase can still happen. 🎯 Why this matters This explains why: Your component “renders” but UI doesn’t change Memoization sometimes feels inconsistent Performance issues appear in unexpected places 💥 The Real Mental Model React doesn’t track changes. It responds to update requests. 🧠 Senior Insight Optimizing React is not about “reducing state changes” It’s about 👉 reducing unnecessary updates #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #WebPerformance #CleanCode #LearningInPublic

Most React performance advice is wrong. Not because the patterns are bad but because developers apply them without understanding what React is actually doing. Here’s what I’ve learned: React.memo without useCallback is just theater. memo tells React: “Only re-render if prop references change.” But if you pass a new function reference on every render, memo does absolutely nothing. // ❌ Kills memo on every render <ProductCard onSelect={(id) => handleSelect(id)} /> // ✅ Actually works const handleSelect = useCallback((id) => { dispatch({ type: "SELECT", payload: id }); }, [dispatch]); useMemo has a cost use it surgically. React still performs dependency comparison on every render. For cheap computations, the memoization overhead can be higher than simply recalculating. Use useMemo only when: the computation is genuinely expensive the result is passed to a memoized child you’ve measured it, not assumed it Before reaching for memo or useMemo, ask: What is actually triggering the re-render? Can you eliminate the trigger instead of memoizing around it? Structural state changes beat memoization every time. What’s the nastiest React performance bug you’ve hit in production? #React #ReactJS #Frontend #TypeScript #WebDevelopment #MERN #JavaScript #SoftwareEngineering

For a long time I tried to stop React from re-rendering. memo, useCallback, anything that could reduce renders. Then I learned something simple: Re-renders cannot be the real problem. React is actually very fast at rendering. The real issue is doing heavy work during render. Example: const sortedUsers = users.sort((a, b) => a.age - b.age) This runs on every render. Better: const sortedUsers = useMemo( () => users.slice().sort((a, b) => a.age - b.age), [users] ) The goal isn’t fewer renders. It’s less work per render. That small shift changed how I think about React performance. When did React finally “click” for you? #reactjs #javascript #frontend #sourcescodedev

I made React slower trying to optimize it. Wrapped everything in useMemo. Added useCallback everywhere. Felt productive. Performance got worse. Here's what I didn't understand about re-renders 👇 4 things that trigger a re-render: > State change > Prop change > Parent re-renders (even if YOUR props didn't change) > Context update That third one is responsible of unnecessary re-renders I've seen in real codebases. The fix isn't memorizing APIs. It's this order: 1. Profile first Open React DevTools Profiler. Find the actual problem. Takes 2 minutes. 2. Wrap the right components in React.memo Not all of them. Only components that are expensive AND receive stable props. 3. Stabilise your functions with useCallback Without it - new function reference every render --> child always re-renders. Doesn't matter if you have React.memo. 4. useMemo for heavy calculations only Not for "this array map looks expensive." Only when Profiler proves it. The rule I follow now: Don't optimise what you haven't measured. One change in the right place beats 10 changes in the wrong ones. What's the most unnecessary useMemo you've ever written? 😄 #React #JavaScript #Frontend #WebDev

Most developers think React components only re-render when props change. I used to believe the same — until I learned something surprising. A component re-renders whenever its parent re-renders, even if the props stay exactly the same. That means a small state update in a parent component can trigger multiple unnecessary renders in child components. One simple optimization that helped me: Using React.memo to prevent unnecessary re-renders. It’s a small change, but in large applications it can improve performance significantly. Still exploring more about how React’s rendering works under the hood. Curious — what’s one React concept that took you a long time to fully understand? #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #SoftwareEngineering

Why does a component re-render even when its state hasn’t changed? Many developers assume that re-rendering only occurs when state changes, but that’s not entirely accurate. Here are the scenarios when React re-renders a component: - Its state changes - Its props change - Its parent re-renders The surprising part is that even if props and state remain the same, if the parent re-renders, the child will also re-render. For example: ```javascript function Parent() { const [count, setCount] = useState(0); return <Child />; } ``` In this case, even though the Child component has no changes, it will still re-render when the Parent updates. This happens because React re-runs the component function to check for any changes. Key Insight: Re-render does not equal DOM update. React may re-render, but it will only update the DOM if something has actually changed. To optimize performance, consider the following strategies: - Use React.memo - Use useMemo / useCallback - Avoid unnecessary parent re-renders #ReactJS #JavaScript #FrontendDevelopment #ReactInternals #SoftwareEngineering #LearningInPublic

🚀 React Hooks Small Projects I recently worked on a few small projects to better understand some important React Hooks. In this video, I demonstrated how these hooks work with simple examples so that beginners can easily understand their usage. 🔹 useState – Used to manage state inside a functional component. It helps update and display dynamic data in the UI. 🔹 useEffect – Used to handle side effects in React applications such as API calls, timers, and updating the DOM when state changes. 🔹 useContext – Helps share data globally across components without passing props manually through every level. 🔹 useReducer – A powerful hook for managing complex state logic, especially when multiple state updates depend on different actions. 🔹 useMemo – Optimizes performance by memoizing expensive calculations so they only run when dependencies change. 🔹 useCallback – Returns a memoized function to prevent unnecessary re-renders when passing functions to child components. These mini projects helped me strengthen my understanding of React Hooks and component optimization techniques. 📌 If you watch the video, you can easily understand how each hook works in a practical way. #ReactJS #ReactHooks #WebDevelopment #MERNStack #JavaScript #FrontendDevelopment #CodingPractice