Loading...
See how React Context works with an interactive visualization. Watch provider value storage, consumer subscription, value propagation through the component tree, and why all consumers re-render.
Loading visualization...
React Context provides a way to pass data through the component tree without prop drilling. A Provider stores a value, and any descendant that calls useContext subscribes to that value and re-renders whenever it changes.
Context solves the problem of passing data through many layers of components that do not use it themselves. Instead of threading props through every intermediate component, you wrap a subtree in a Provider and let any descendant read the value directly with useContext.
Internally, createContext creates a context object that holds a default value. When a Provider mounts, it stores a new value on the context. When useContext is called, React walks up the fiber tree from the consumer to find the nearest Provider for that context and returns its current value.
Context does not have a built-in selector mechanism. When a Provider's value changes (determined by Object.is comparison), React re-renders every component that called useContext for that specific context, regardless of which part of the value each consumer actually uses.
Interview framing: define Context Propagation in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
Writing <Provider value={{ theme, locale }}> creates a new object on every render. Since Object.is compares by reference, every consumer re-renders even if theme and locale have not changed.
Fix: Memoize the value object with useMemo: const value = useMemo(() => ({ theme, locale }), [theme, locale]). This keeps the same reference when the dependencies have not changed.
A context with many fields causes all consumers to re-render when any field changes, even if a given consumer only reads one field. There is no way to subscribe to a subset of the context value.
Fix: Split large contexts into smaller, focused ones. For example, separate ThemeContext from UserContext. Each consumer then only re-renders when the specific context it subscribes to changes.
Unlike Redux useSelector, useContext does not accept a selector function. You cannot pick a single field from the context value and skip re-renders when other fields change.
Fix: Use the use(Context) API in React 19+ with memoization patterns, split contexts, or consider an external state library for fine-grained subscriptions.
Common interview prompts with concise model answers.
React walks up the fiber tree from the component that called useContext to find the nearest Provider for that context. It returns the Provider's current value prop. If no Provider exists, it returns the default value passed to createContext.
React compares the old and new values using Object.is. If they differ, every component that called useContext for that context is scheduled for a re-render, regardless of whether the component uses the changed part of the value.
// All consumers re-render when count changes
<CountCtx.Provider value={count}>
<Display /> {/* re-renders */}
<Badge /> {/* re-renders */}
<Logo /> {/* does NOT re-render (no useContext) */}
</CountCtx.Provider>An inner Provider shadows the outer one for its entire subtree. Consumers inside the inner Provider read the inner value. Consumers outside the inner Provider (but inside the outer) read the outer value. Each consumer always reads from its nearest ancestor Provider.
<ThemeCtx.Provider value="dark">
<Label /> {/* reads "dark" */}
<ThemeCtx.Provider value="blue">
<Label /> {/* reads "blue" */}
</ThemeCtx.Provider>
</ThemeCtx.Provider>Object literals create a new reference on every render. Since React uses Object.is (reference equality) to detect value changes, a new reference always counts as a change, triggering all consumers to re-render. Wrapping the value in useMemo prevents this by preserving the reference when dependencies have not changed.
Continue with these concepts to strengthen your mental model.
const ThemeCtx = createContext("light"); function ThemedButton() { const theme = useContext(ThemeCtx); return <button>{theme}</button>;} function App() { return ( <ThemeCtx.Provider value="dark"> <ThemedButton /> </ThemeCtx.Provider> );}waiting
no context registered
no consumers subscribed