Context Consumer (React)

Context Consumer is a React API that lets a component read a context value through a render-prop function. It is especially useful in older React codebases that use class components or predate widespread adoption of hooks.

A context object created with `React.createContext` exposes a `Consumer` component. The Consumer receives a function as its child, and React calls that function with the current context value.

The function can render UI based on the value without manually passing that value through intermediate components. The value comes from the nearest matching `Provider` above the Consumer in the rendered tree.

A Consumer is useful when a component cannot or does not use the `useContext` hook, such as many class components. Function components in modern React commonly use `useContext` instead because it is more concise.

If no matching Provider is above the Consumer, React supplies the default value specified when the context was created. When the Provider's context value changes, Consumers that use that context can re-render with the new value.

Key points

• `Context.Consumer` reads a context value through a render-prop function.
• The child function receives the current context value as its argument.
• The nearest matching `Provider` determines the supplied value.
• It is commonly encountered in pre-hooks React code and class-component code.
• `useContext` is the usual hook-based alternative for function components.

Interview questions

What is `Context.Consumer` in React?

`Context.Consumer` is a component provided by a React context object for reading its current value. It expects a function as its child, and React calls that function with the context value. The function returns the UI to render. It is commonly seen in older React code, especially before hooks became available.

How does a Context Consumer obtain its value?

A Consumer reads the value from the nearest matching context Provider above it in the component tree. The Provider supplies its value through the context mechanism rather than ordinary props. If no Provider is found, the context's default value is used. This lets deeply nested components consume shared data without receiving it through every intermediate component.

Why would you use `Context.Consumer` instead of passing props?

Context avoids prop drilling when many components need access to the same value. A Consumer can access that value directly from the context hierarchy, even when intermediate components do not need it. Props remain useful when the dependency should be explicit and local. Context is better suited to values that are shared across a component subtree.

What is the difference between `Context.Consumer` and `useContext`?

Both mechanisms allow a component to read a context value. `Context.Consumer` uses a render-prop callback, whereas `useContext` returns the context value directly from a function component or custom hook. The hook-based form is generally easier to read in modern function components. Consumer remains relevant when maintaining older code or patterns that already use render props.

What happens to a Consumer when the context Provider value changes?

Consumers that depend on that context can re-render with the new context value. The Provider establishes the value for its descendant consumers, so changing that supplied value can propagate an update through the context dependency. The exact rendering behavior also depends on the surrounding component structure and React version. In performance-sensitive code, it is important to consider how frequently the Provider value changes and how broadly the context is consumed.