Optimize React Component Re-Renders with React.memo

🛑 Stop using nested ternaries in your React components. If you’ve built React apps with multiple user roles or complex statuses, you’ve probably seen the "JSX Pyramid of Doom." condition1 ? <A/> : condition2 ? <B/> : <C/> It works... until Product asks for a 4th and 5th variation. Suddenly, your return statement is a massive, unreadable block of ? and : . We already know that Guard Clauses fix messy business logic. But how do we fix messy JSX rendering? The easiest fix: The Component Map (Dictionary Pattern). 🗺️ Instead of writing if/else or chained ternaries inside your markup, map your conditions to their respective components using a simple JavaScript object. Why this wins: ✅ Readability: Your actual JSX return statement becomes exactly one line. ✅ Extensibility: Want to add a "Moderator" role? Just add one line to the object. You don't even have to touch the component logic. ✅ Performance: Object property lookup is O(1). No more evaluating chains of conditions. Stop forcing your JSX to do the heavy lifting. Let data structures do it for you. 🧠 Are you Team Ternary or Team Map? 👇 #ReactJS #FrontendDevelopment #CleanCode #JavaScript #TypeScript #WebDev #SoftwareArchitecture

React Component Lifecycle – Change Phase & Unmount (Simple Explanation) After a component mounts, it doesn’t stay static. It moves into: 🔄 Change (Update) Phase ❌ Unmount Phase Let’s understand both in a simple way. 🔄 Change Phase (Update) A component re-renders when something changes. What triggers a re-render? • State changes – When we update state using useState() • Props changes – When parent sends new data • User events – Click, typing, form submit • Context updates – Theme/Auth changes • Global state updates – Redux / Zustand store changes What React does internally: Change → Re-render → Virtual DOM diff → Update only what changed This is why React apps are efficient. ❌ Unmount Phase (Cleanup) Unmount happens when a component is removed from the screen. Examples: • Page navigation • Modal closed • Conditional rendering becomes false Why cleanup is important: • Prevents memory leaks • Stops background timers • Removes event listeners • Cancels API subscriptions useEffect(() => { consttimer=setInterval(() => { console.log("Running..."); }, 1000); return () => { clearInterval(timer); }; }, []); The return function runs when component unmounts. 💡 Why This Matters Understanding Change & Unmount phases helps you: ✔ Write better hook logic ✔ Avoid unnecessary re-renders ✔ Improve performance ✔ Build scalable React apps As a learner, I’m realizing React becomes easier when you think in lifecycle phases instead of just writing components. #ReactJS #FrontendDevelopment #ReactHooks #WebDevelopment #LearningInPublic #JavaScript

Day 6: Understanding State in React If Props allow components to receive data, then State allows components to manage and update their own data. 📌 What is State in React? State is a built-in object that allows a component to store data that can change over time. When the state changes, React automatically re-renders the component, updating the UI. 📌 Example using useState Hook import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}> Increase </button> </div> ); } 📌 What is happening here? • count → current state value • setCount → function used to update the state • useState(0) → initial value of state When the button is clicked, the state updates and the UI re-renders automatically. 📌 Props vs State Props • Passed from parent component • Read-only State • Managed inside the component • Can be updated 📌 Why State is important State allows React applications to be interactive. Examples: • Counter apps • Form inputs • Toggle buttons • Dynamic UI updates #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic

REACT INTERNALS - PART 6 How React.memo Prevents Unnecessary Re-renders In Part 5, we learned that React compares references, not values. Because of this, components can re-render even when the data looks exactly the same. So how do we avoid unnecessary child renders? That’s where React.memo comes in. 🔹 What is React.memo? React.memo is a higher-order component that memoizes a functional component. It tells React: If props haven't changed, skip re-rendering this component. Example: const Child = React.memo(function Child({ theme }) { console.log("Child rendered") return <div>{theme}</div> }) 🔹 Without React.memo function Parent() { const [count, setCount] = React.useState(0) return ( <> <button onClick={() => setCount(count + 1)}> Increase </button> <Child theme="dark" /> </> ) } When the button is clicked: • Parent re-renders • Child re-renders Even though the theme prop never changed. 🔹 With React.memo When the child component is wrapped with React.memo: • Parent re-renders • Props compared • Props same • Child re-render skipped React performs a shallow comparison of props, and if they are unchanged, the child render is skipped. 🎯 Key Insight React.memo helps optimize performance by skipping unnecessary child renders when props remain the same. But it works best when combined with: • useMemo • useCallback to keep object and function references stable. Next: How useMemo and useCallback stabilize references. #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #SoftwareEngineering

React Isn’t Slow. You Just Don’t Understand Re-renders. One thing that genuinely improved my React code quality was properly understanding how re-renders actually work. Here’s the simple version. A component re-renders when: • Its state updates • Its parent re-renders • Its props change • Its context value changes That’s it. But here’s the part many developers misunderstand: A re-render does not automatically mean the DOM updates. What actually happens: React runs the component again → Creates a new virtual tree → Compares it with the previous one → Updates the real DOM only if something changed. If nothing changed after comparison, the browser DOM isn’t touched. So why do apps still feel slow sometimes? From what I’ve seen in real-world projects, it’s usually architecture: • State lifted higher than necessary • Passing new object/function references every render • Components handling too many responsibilities • Weak separation of concerns Small example: Creating a new object inside render and passing it as a prop changes its reference every time → child re-renders. That’s not React being slow. That’s design decisions. The order I try to follow now: 1️⃣ Fix component boundaries 2️⃣ Keep state as local as possible 3️⃣ Stabilize props where necessary 4️⃣ Then think about memoization Performance issues are rarely solved by adding hooks randomly. They’re solved by thinking clearly about structure. Day 1/100 — sharing practical frontend lessons from production experience. Curious — what was the most confusing re-render bug you’ve faced? #ReactJS #FrontendEngineering #WebPerformance #SoftwareDevelopment #JavaScript

A very common React mistake I see developers make: Mutating State When I was learning React, one concept that changed the way I write code was this rule: 👉 React state must never be mutated.its always immutable. But why? React does not deeply compare objects or arrays when state updates. Instead, it performs a reference(memory) comparison. That means React checks: Old State === New State ? If the reference is the same, React assumes nothing changed and skips re-rendering. Example of a mistake: cart.push(product) // ❌ Mutating state setCart(cart) Here we modified the same array in memory, so React may not detect the change because the memory location is same.so no re-render..no UI update. The correct approach is immutability: setCart([...cart, product]) // ✅ Creating a new array Now React sees a new reference, triggers reconciliation, and updates the UI correctly. 💡 Why React prefers immutability: • Faster change detection • Predictable state updates • Easier debugging • Better performance This small concept explains why patterns like: map() filter() spread operator (...) are used so frequently in React. because all this returns new object or array... Understanding this helped me write cleaner and more reliable React components. What React concept took you the longest to understand? 🤔 #React #Frontend #JavaScript #WebDevelopment #ReactJS

Some days feel great. Some feel average. Some just feel heavy. I built Mood Trends Dashboard to explore how small daily emotions can turn into visible patterns over time. This React application allows users to log their mood each day and visualize how their emotional state evolves through simple, structured charts. The goal was to focus on clarity, clean state management, and meaningful data visualization without overcomplicating the idea. Through this project, I strengthened my understanding of: • Managing dynamic state using React Hooks • Syncing and persisting data with Local Storage • Building reusable and structured components • Rendering charts that update in real time • Designing a clean and responsive user interface Tech Stack: React.js · JavaScript (ES6+) · Vite · Chart Library 🌐 Live Demo (Deployed on Vercel): https://lnkd.in/g9Gb4E4H 💻 GitHub Repository: https://lnkd.in/gV93JQUz Sometimes simple ideas are the best way to sharpen fundamentals. Open to feedback and always looking to improve. #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #BuildInPublic

120 re-renders → 8 re-renders. Same UI. Same API. Same components. No backend change. No infrastructure change. Just one React concept many developers underestimate. A dashboard I worked on started feeling slow whenever someone typed in the search field. Every keystroke caused the entire page to update — tables, charts, filters, and widgets. So we checked the React DevTools Profiler. Result: ~120 component re-renders for a single keystroke. The API wasn’t the issue. The problem was unnecessary re-renders in the component tree. The root cause A parent component was creating new function references on every render. Example: handleSearch = (value) => { setSearch(value) } Each render created a new function, so React assumed the props changed and re-rendered child components. The fix We stabilized the function reference using useCallback: handleSearch = useCallback((value) => { setSearch(value) }, []) We also applied: • React.memo for heavy components • useMemo for expensive calculations Result 120 re-renders → 8 re-renders Typing became instant. Same UI. Same logic. Just better render control. 💡 Most React performance problems aren’t caused by React itself — they come from how we manage props, state, and re-renders. What React performance issue took you the longest to debug? #React #Frontend #WebPerformance #JavaScript #SoftwareEngineering #WebDevelopment

A small React question 👇 //child component const Child = React.memo(({ name }) => { console.log("Child rendered"); return <div>{name}</div>; }); Parent component renders this: <Child name="Vivek" /> If the parent re-renders, will the child render again? ✅ No. Because React checks: "Vivek" === "Vivek" So React.memo skips the render. → Now a tiny change: <Child config={{ theme: "dark" }} /> Same question. Will the child render again? 👀 ➡️ Yes. Even though the object looks identical. Because in JavaScript: { theme: "dark" } !== { theme: "dark" } A new object is created on every render, so React thinks the prop changed. The fix is simple: const config = useMemo(() => ({ theme: "dark" }), []); <Child config={config} /> Now the reference stays the same and React.memo can actually skip the render. One of the biggest React performance lessons: Strings and numbers are usually safe. Objects, arrays, and functions can quietly break memoization. So if you want to avoid unnecessary re-renders in child components, be careful when passing objects as props. #react #javascript #frontend #webdevelopment #fullstackdevelopment #softwaredeveloper #fullstackdeveloper

🚀 React Hooks — All in One (Simple Explanation) Hooks let you use state & lifecycle features in functional components in React. 🔹 useState Manages local state ➡ State change = UI update const [count, setCount] = useState(0); 🔹 useEffect Handles side effects (API calls, subscriptions, timers) useEffect(() => {}, []); 🔹 useContext Share data globally (No prop drilling) 🔹 useRef Access DOM & store values (No re-render) 🔹 useMemo Optimize heavy calculations (Recompute only when needed) 🔹 useCallback Optimize functions (Avoid unnecessary re-renders) 🔹 useReducer Handle complex state logic (Like Redux pattern) 🔹 useLayoutEffect Runs before browser paint (Used for layout work) 🔹 Custom Hooks Reuse logic across components (Clean & maintainable code) 💡 One-Line Summary Hooks make React code simpler, cleaner, and more powerful. 👍 Like | 💬 Comment | 🔁 Share #React #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode