Context lets a provider pass a value to any descendant without drilling props through every layer. Common uses: theme, locale, authenticated user snapshot, feature flags.
API sketch
const ThemeContext = React.createContext('light');
function Provider({ children }) {
const [theme, setTheme] = React.useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
function Panel() {
const { theme } = React.useContext(ThemeContext);
}Trade-offs
- Consumers re-render when context value identity changes—split contexts or memoize value objects
- Overuse hides data flow—reserve for truly cross-cutting concerns
- Not a replacement for server cache libraries (React Query, etc.)
Self-check
- Why wrap the value in
useMemowhen providing objects? - When is context better than prop drilling?
Pitfall: A new object literal in Provider value={{ ... }} every render re-renders all consumers—memoize the value object.
Interview prep
- What is Context good for?
Cross-cutting values—theme, locale, auth snapshot—without drilling. Split contexts or memoize values to limit consumer re-renders.