Frontend

You’ve mastered memo, useCallback, and useMemo. Your components are optimized. Life is good. Then you add Context… and everything re-renders again. Welcome to the Context trap. How Context Works Every component using useContext re-renders when the context value changes. No exceptions. React.memo won’t save you. Your optimizations? Worthless. // ❌ This memo does NOTHING const UserProfile = memo(function UserProfile() { const user = useContext(UserContext); return <div>{user.name}</div>; }); When state in a context provider updates, React forces all context consumers to re-render, completely bypassing any memoization. ...

Ever wonder why your React app feels sluggish? Let’s fix those unnecessary re-renders. When Does React Re-render? Three triggers: Props change State changes Parent re-renders The catch? React does shallow comparisons. New object/function references = re-render, even with identical values. That’s where useMemo, useCallback, and React.memo save the day. The Problem // ❌ ExpensiveChild re-renders on EVERY keystroke function Parent() { const [count, setCount] = useState(0); const [text, setText] = useState(""); return ( <> <input value={text} onChange={(e) => setText(e.target.value)} /> <button onClick={() => setCount(count + 1)}>Count: {count}</button> <ExpensiveChild count={count} /> </> ); } Solution 1: React.memo // ✅ Only re-renders when count actually changes const ExpensiveChild = memo(function ExpensiveChild({ count }) { return <div>Count is: {count}</div>; }); Solution 2: Component Composition (Even Better!) Here’s the secret: you often don’t need memo at all. ...