Optimize React Performance with useMemo

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

🧠 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

How React Remembers State Between Renders? When a component re-renders, the function runs again from top to bottom. So how does useState not reset every time? 🤔 function Counter() { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } Every render: The function runs again and Variables are recreated. So why doesn’t count go back to 0? What Actually Happens Internally React stores state outside the component function. Behind the scenes: 1) Each component has a Fiber node 2) React keeps a linked list of Hooks 3) It tracks Hooks based on call order State is not stored in your function. It’s stored in React’s internal Fiber system. The function is just a way for React to describe UI. Understanding this makes Hooks feel much less magical. #ReactJS #ReactInternals #ReactHooks #FrontendDevelopment #SoftwareEngineering #JavaScript

A small React fun fact that changes how you think about performance: It’s not the DOM update that hurts the most. It’s what the browser does after it. When you change something in the DOM, the browser may: → recalculate layout (where everything sits) → repaint pixels on the screen And that can be more expensive than the JavaScript itself. Which means: You can have perfectly optimized React code… and still ship a slow UI. Example: Changing width, height, top, left → triggers layout Changing transform, opacity → usually avoids it That is why animations using transform feel smoother. React optimizes rendering. But the browser decides the real cost. Understanding this is where frontend becomes engineering, not just coding. #Frontend #React #Performance #WebDevelopment #JavaScript

🎯 useEffect vs useLayoutEffect — finally clicked for me! While diving into React hooks, I kept getting confused between useEffect and useLayoutEffect… until this made it super clear 👇 👉 useLayoutEffect • Runs synchronously • Fires before the browser paints the UI • Great for measuring or updating the DOM before it’s visible 👉 useEffect • Runs asynchronously • Fires after the UI is painted • Ideal for API calls, timers, and subscriptions 💡 Key takeaway: • useLayoutEffect → blocks rendering (use sparingly) • useEffect → non-blocking (preferred in most cases) Also got a better understanding of cleanup functions (destroy/unmount) to prevent memory leaks—especially with intervals and API calls. It’s amazing how mastering small concepts can level up your React skills 🚀 #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #ReactHooks #SoftwareEngineer #Angular

Monday – React Tip 💙 A React mistake that silently causes unnecessary re-renders. Passing objects directly as props. Example: const filters = { status: “active” } <Component filters={filters} /> Looks fine, right? But if this object is created inside the component, React sees a new reference on every render. That means even memoized components can re-render. Better pattern: Use useMemo for stable references when needed. const filters = useMemo(() => ({ status: “active” }), []) Why this matters: React compares references, not values. Small patterns like this make a huge difference in large applications. Advanced React isn’t about more hooks. It’s about controlling rendering behavior. See you tomorrow for JavaScript Concept Tuesday 👀 #ReactJS #FrontendDevelopment #WebPerformance #LearningInPublic

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

Classic: Why is my ellipsis broken? It’s always funny watching a complex layout crumble because of a single line of CSS. You throw text-overflow: ellipsis at an element, but it just keeps pushing its neighbors around like it owns the place. The "Why": In Flexbox and Grid, items have min-width: auto by default. Your content is literally "too strong" for the container—it refuses to shrink smaller than the text itself. Until you give it permission to "slim down," that ellipsis isn't doing anything. The Irony: We build enterprise-grade apps with React and TypeScript, yet 50% of "broken" layouts are fixed by zeroing out a single property. If your 1fr column is acting up, you know what to do. #css #frontend #webdev #typescript #javascript #react #ui

POV: You start React thinking it’s just “thoda sa JSX” 🤡 Then suddenly you are stuck between Virtual DOM, Babel, Fiber Nodes, Reflow, Re-rendering and your brain says: “bhai ye sab kya chal raha hai?” 😭 Today’s React Revision & Deep Dive was like a full frontend rollercoaster 🎢 Revised topics: ⚛️ Real DOM vs Virtual DOM 🧠 JSX 🔄 Babel ⚡ Vite Bundler 📦 Props 🪜 Props Drilling 🔘 useState Hook 🧩 Components 🧵 React Fiber Nodes 🎨 Reflow & Repaint 🔁 Reload / Re-render Behavior The more I revise React, the more I realize that React is not just about making UI… It’s about understanding what happens behind the scenes when the UI changes. Big thanks to my Guruji Devendar Dhote for guiding and helping me see React beyond just syntax 🙏 Still learning, still revising, still trying to decode how React actually thinks 🚀 #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #ReactJS A slightly more savage Gen Z version: Started React with: “haan haan sab samajh aa gaya” 😎 Then React said: “Accha? Bata Fiber kya hota hai.” 💀 So today I revised: Real DOM, Virtual DOM, JSX, Babel, Vite, Props, Props Drilling, useState, Components, React Fiber Nodes, Reflow & Repaint, and Re-render behavior. At this point, React is teaching me that frontend is not just design and buttons — it’s pure behind-the-scenes madness + smart UI updates. Huge respect to my Guruji Devendra Dhote for the guidance 🙏 Day by day, trying to understand React deeper than just tutorials. #React #JavaScript #WebDev #FrontendDevelopment #LearningInPublic