How do you diagnose and fix unnecessary re-renders?

Question

Accepted Answer

First **measure**, then fix the real cause — don't sprinkle `useMemo` everywhere on a guess. ## Diagnose Use the **React DevTools Profiler** (enable "Highlight updates when components render"). It shows which components re-rendered and *why* (props changed, state changed, parent rendered, context changed). ## Common causes and fixes **1. New object/array/function props each render** defeat `React.memo`: ```jsx // ❌ new function + new object every render go()} style={{ color: "red" }} /> // ✅ stabilize them const onClick = useCallback(() => go(), []); const style = useMemo(() => ({ color: "red" }), []); ``` **2. Context value recreated each render** → all consumers re-render. Memoize the `value` or split contexts. **3. State placed too high.** Lowering state so fewer components depend on it is often the biggest win: ```jsx // move the fast-changing input state DOWN into the input component // so typing doesn't re-render the whole page ``` **4. Expensive work in render** → wrap in `useMemo`. ## Don't over-optimize Re-renders are usually **cheap** — React is fast. Most "optimizations" add complexity for no measurable benefit. Prefer **structural fixes** (colocating state, list **virtualization** for thousands of rows) over scattering memos. Optimize the specific hotspots the profiler reveals, and re-measure to confirm the fix actually helped.