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.
store = ();
count = store.;
count = ( s.);
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.
// ❌ one big context → every consumer re-renders when anything changes
// ✅ separate contexts so unrelated updates don't cross-trigger
<ThemeContext><UserContext>...</UserContext></ThemeContext>
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.
State high in the tree re-renders everything below it.
Move state DOWN to the smallest component that needs it → smaller re-render scope.
// ❌ a new object/array each render breaks memoization downstream
<Child config={{ a: 1 }} /> // new {} every render
// ✅ stable reference
const config = useMemo(() => ({ a: 1 }), []);
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
React DevTools Profiler / "why did you render" → find what actually re-renders
before optimizing. Premature memoization adds complexity for no gain.
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.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate