What is useContext in React?
Learn what useContext does in React, how it eliminates prop drilling, when to use it, and how Provider updates trigger re-renders across consumers.
Expected Interview Answer
useContext is a React hook that lets a component read a value from the nearest matching Context.Provider above it in the tree, without passing that value down manually through every intermediate component's props.
You create a context with createContext, wrap a subtree in a Provider carrying a value, and then any descendant component can call useContext(MyContext) to read that value directly. This solves prop drilling, where deeply nested components need data from a distant ancestor and every component in between would otherwise need to accept and forward an unused prop. When the Provider's value changes, every component that calls useContext for that context re-renders, which means context is best suited for values that don't change extremely often, like theme, authenticated user, or locale. For frequently changing or performance-sensitive state shared across the tree, dedicated state libraries or splitting contexts by concern often work better than one large context object.
- Eliminates manual prop drilling through intermediate components
- Centralizes shared values like theme, auth, or locale
- Simple API: createContext, Provider, useContext
- Encourages clear ownership of shared state
- Works seamlessly alongside other hooks like useState
AI Mentor Explanation
useContext is like a stadium-wide public address system broadcasting the current match score to every section at once, instead of a runner physically carrying the score row by row up the stands. Any spectator in any section simply tunes in to hear the update directly, without relying on their neighbor passing it along.
Step-by-Step Explanation
Step 1
Create the context
Call createContext(defaultValue) once, typically in its own module, to produce a Context object.
Step 2
Wrap with a Provider
Render Context.Provider around the subtree that needs access, passing the shared value via the value prop.
Step 3
Call useContext in a consumer
Inside any descendant component, call useContext(MyContext) to read the current value.
Step 4
React tracks the nearest Provider
useContext resolves to the value from the closest matching Provider above the calling component.
Step 5
Provider value changes trigger updates
When the Provider's value prop changes, all consuming components re-render with the new value.
What Interviewer Expects
- Explains useContext avoids prop drilling
- Knows the createContext/Provider/useContext workflow
- Understands Provider value changes re-render all consumers
- Recognizes context is best for infrequently changing shared data
- Can compare context to alternatives like state libraries
Common Mistakes
- Using one giant context for all app state, causing excessive re-renders
- Forgetting to wrap components in the Provider before consuming
- Assuming context updates are more efficient than they actually are
- Confusing context with global variables that bypass React's render cycle
- Not memoizing the Provider's value, causing unnecessary re-renders
Best Answer (HR Friendly)
“useContext lets far-apart parts of an app share information, like the current theme or logged-in user, without manually passing that data through every component in between. It keeps the code cleaner when many components need the same shared piece of information.”
Code Example
import { createContext, useContext, useState } from 'react';
const ThemeContext = createContext('light');
function App() {
const [theme, setTheme] = useState('dark');
return (
<ThemeContext.Provider value={theme}>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return <ThemedButton />; // no need to pass theme as a prop
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>Click me</button>;
}Follow-up Questions
- What problem does useContext solve compared to passing props?
- What happens to consumers when a Provider's value changes?
- When should you avoid putting frequently changing state in context?
- How do you provide a default value if no Provider is present?
- Can you use multiple contexts in the same component tree?
MCQ Practice
1. What problem does useContext primarily solve?
useContext lets deeply nested components read shared values directly, avoiding the need to pass props through every intermediate layer.
2. Which value does useContext resolve to?
useContext looks up the tree and returns the value from the closest matching Context.Provider ancestor.
3. What happens to components consuming a context when its Provider value changes?
Every component calling useContext for that context re-renders whenever the Provider's value changes.
Flash Cards
What does useContext do? — It reads a value from the nearest matching Context.Provider, without needing prop drilling.
What three steps set up context usage? — createContext to define it, Provider to supply a value, useContext to read it.
What happens when a Provider's value changes? — All components using useContext for that context re-render with the new value.
Is context ideal for rapidly changing state? — Not usually — frequent updates can cause widespread re-renders across all consumers.