Context

The problem. A value is needed deep in the tree. Passing it as a prop means threading it through six components that have no interest in it, each of which now has a prop it only forwards.

That is called prop drilling, and context is the answer to it.

What context is not. It is not a state manager, and it is not a performance optimization. Every component reading a context re-renders when its value changes, including the ones that only care about part of it.

Use it for things that are genuinely application-wide and change rarely: the theme, the signed-in account, the language. Two or three contexts is healthy. Twelve means state has been made global to avoid thinking about where it belongs.

✦ Lift before you reach for context

Most prop drilling is two levels deep and better solved by moving the state or by passing children. Context earns its cost when a value is needed in many places at many depths, not when one prop is passed twice.