React Context — when does it cause re-renders, and how do you avoid them?

Context is React's built-in dependency injection. It's perfect for low-frequency values — theme, locale, current user, feature flags. It's wrong for high-frequency state — mouse position, form fields, anything that changes every keystroke — because every consumer re-renders on every value change.

The mechanism: <Provider value={…}> triggers a re-render in every component that calls useContext, regardless of which part of the value they read. There's no built-in selector.

Three fixes, in increasing power:

1. Stabilize the value. Wrap in useMemo so the reference only changes when underlying data does. Catches the most common bug — inline object literals creating a new reference every render.
2. Split contexts. Separate UserContext from UserActionsContext so a re-render of the user object doesn't re-render every component that only needs logout(). Actions barely change; data does.
3. Selector pattern. use-context-selector (or graduate to Zustand/Redux) lets consumers subscribe to a specific slice. Only components reading that slice re-render. This is what state libraries solve out of the box.

Default: use Context for things that rarely change. Reach for a real store the moment you find yourself memoizing aggressively or splitting contexts to avoid render storms — that's the signal you've outgrown raw Context.