Nearest Provider Resolution

React resolves a consumed context value by finding the closest matching provider above the consuming component in the component tree. This lets nested components receive shared values without passing them through every intermediate component as props.

A React context is created with `createContext`, and components read its current value with `useContext` or a context consumer. When React evaluates a consumer, it searches the rendered component tree upward for the nearest matching context provider.

If multiple providers for the same context are nested, the innermost provider determines the value seen by components beneath it. A provider farther up the tree is effectively shadowed for that subtree.

If no matching provider exists above the consumer, React uses the default value supplied when the context was created. That default is not a substitute provider; it is the fallback value used when the lookup finds no provider.

Changing the value supplied by the relevant provider can cause components consuming that context to render with the new value. The important distinction is that context lookup follows the React component tree, not the DOM hierarchy alone.

Key points

• The consumer receives the value from the nearest matching provider.
• Nested providers can override the value for their descendant subtree.
• Without a matching provider, React uses the context's default value.
• `useContext` reads context during rendering; it does not require prop drilling through intermediate components.

Interview questions

Does context lookup follow the DOM tree or the React component tree?

Context resolution is based on the React component tree. The relevant relationship is the provider's position relative to the consumer in React's rendered tree, rather than simply inspecting DOM parent elements. This matters because React components can introduce relationships that are not obvious from the final DOM. When debugging context, think in terms of React ancestors and descendants.

Why can context reduce prop drilling?

With prop drilling, intermediate components must receive a value and pass it onward even when they do not use it themselves. Context lets a descendant read the value directly from an ancestor provider. This can simplify APIs for deeply shared data such as theme or locale settings. However, context also creates an implicit dependency, so it should not automatically replace explicit props.

How does React determine which context value a component receives?

React looks for the nearest matching provider above the component in the React component tree. If it finds one, the consumer receives that provider's value. If none exists, React uses the context's default value. Therefore, a nested provider can change the value seen by only its descendant subtree.

What happens if you nest two providers for the same context?

A consumer under both providers reads the value from the provider closest to it. The outer provider still applies to descendants that are not inside the inner provider. This allows a subtree to override a shared value without changing the value for the rest of the tree.

What does `useContext` return when there is no provider?

It returns the default value passed to `createContext`. For example, `createContext("light")` gives consumers `light` when no matching provider is present above them. Once a matching provider is present, its supplied value is used instead.