Context Performance Pitfalls

Context solves prop drilling. It also re-renders every consumer when the provider’s value changes by Object.is. One mega-provider with { user, theme, cart, tick } is a performance footgun.

Docs: useContext, Passing Data Deeply.

The classic bug

function App() {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  // New object every render — all consumers update every time
  return (
    <AppContext.Provider value={{ user, setUser, theme, setTheme }}>
      <Page />
    </AppContext.Provider>
  );
}

Even a memoized child that only needs theme re-renders when user changes if it reads the combined context.

Split by update rate

<UserProvider>
  <ThemeProvider>
    <CartProvider>
      <Page />
    </CartProvider>
  </ThemeProvider>
</UserProvider>

Consumers subscribe only to the slice they read. High-frequency values (mouse position, scroll) should not live in wide context — use refs, state colocation, or external stores (useSyncExternalStore).

Memoize value when the object is composite

const value = useMemo(
  () => ({ user, setUser }),
  [user]
);
return <UserContext.Provider value={value}>{children}</UserContext.Provider>;

setUser from useState is stable. Including unstable inline functions re-creates value every render.

Composition before context

Many “context” needs are children slots. Prefer composition when only a few leaves need data.

Interview out-loud

“Context re-renders all consumers when value identity changes. I split providers by concern and update frequency, memoize object values, and keep high-frequency state out of wide context. Composition often removes the need for context entirely.”

Related on this site

• Avoid Prop Drilling with Composition
• React.memo
• useSyncExternalStore Overview
• React Performance Checklist

Further reading

• useContext — react.dev
• Passing Data Deeply with Context — react.dev

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides

• useCopyToClipboard HookCopy text with navigator.clipboard, fallback execCommand, transient copied state, and permissions that fail in insecure contexts.
• useDebouncedValue HookDebounce a changing value in React without firing effects on every keystroke. Cleanup, leading vs trailing, and the stale timer that updates unmounted state.
• useEventListener HookAttach a window, document, or element listener with a stable handler ref so you do not rebind on every render. Capture option and target changes.
• useFetch With AbortControllerFetch in an effect with a signal, ignore aborted errors, and prevent the slow response from winning a race after the url changes.
• useIdle HookDetect idle users: reset a timer on input events, fire idle after timeout, and decide whether mount starts the timer immediately.