How do you keep state updates from causing excessive re-renders?

Question

Accepted Answer

State changes trigger re-renders, and poorly-structured state can cause **far more re-rendering than necessary** — slowing the app. The key strategies: subscribe narrowly, split state, memoize, and keep state local. ## 1. Subscribe to the minimum slice you need ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` Selective subscriptions (Zustand/Redux selectors, Jotai atoms) are the single biggest lever — components re-render only when their specific slice changes, not on every store update. ## 2. Split state / context to limit blast radius ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoize components and values ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` Memoization prevents children from re-rendering when their props (by reference) haven't changed — but it only works if you also keep props/callbacks referentially stable (hence `useCallback`/`useMemo`) and update state **immutably**. ## 4. Keep state as local as possible ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. Don't store derived values; avoid new references each render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Use memoized selectors for derived data ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## Measure first ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Why it matters Excessive re-renders are a leading cause of sluggish React/state-driven apps, and they stem from how state is structured and subscribed to. The toolkit — narrow selective subscriptions, split contexts, memoization with stable references, immutable updates, and localizing state — directly controls re-render scope. Crucially, you should **measure** (Profiler) to find the real bottleneck before optimizing, since careless memoization adds complexity without benefit. Understanding what triggers re-renders and how to contain them is essential for performant large-scale apps.