What is the Context API in React?
Understand the React Context API: how createContext, Provider, and useContext eliminate prop drilling, with code examples and common interview questions.
Expected Interview Answer
The Context API is a built-in React feature that lets you share data across a component tree without passing props manually at every level, solving the prop-drilling problem.
You create a context with createContext, wrap part of the tree in a Provider that supplies a value, and any descendant reads it with the useContext hook. When the provider's value changes, every consuming component re-renders. It's ideal for global-ish data like the current theme, authenticated user, or language, but it isn't a full state manager and can cause broad re-renders if the value changes often.
- Eliminates prop drilling through many layers
- Built into React with no extra library
- Clean access to shared data via useContext
- Great for themes, auth, and locale
- Keeps intermediate components free of pass-through props
AI Mentor Explanation
Context is like the stadium's public address system: the announcer broadcasts the score once and every player and spectator hears it directly. Without it, you'd have to whisper the score person to person along each row until it reached the back — slow and easy to garble.
Step-by-Step Explanation
Step 1
Create the context
Call createContext with an optional default value to get a Context object.
Step 2
Wrap with a Provider
Render Context.Provider around the subtree and pass the shared data via its value prop.
Step 3
Consume with useContext
In any descendant, call useContext(Context) to read the current value directly.
Step 4
Update the value
Store the value in state at the provider so changing it re-renders all consumers.
Step 5
Split contexts to limit re-renders
Separate rarely-changing and frequently-changing data into different contexts to avoid needless re-renders.
What Interviewer Expects
- Understanding of prop drilling and how context solves it
- Knowing createContext, Provider, and useContext
- Awareness that provider value changes re-render consumers
- Good use cases like theme, auth, and locale
- Knowing context is not a full replacement for Redux
Common Mistakes
- Treating Context as a full state management library
- Putting all app state in one giant context, causing wide re-renders
- Passing a new object literal as value on every render
- Forgetting to wrap consumers in the Provider
- Using context for data that only one nearby component needs
Best Answer (HR Friendly)
“The Context API is React's built-in way to share information, like the logged-in user or the chosen theme, with many components at once without manually passing it down through every layer in between. Components that need it simply read it directly.”
Code Example
const ThemeContext = createContext('light')
function App() {
const [theme, setTheme] = useState('dark')
return (
<ThemeContext.Provider value={theme}>
<Toolbar />
</ThemeContext.Provider>
)
}function Toolbar() {
return <ThemedButton />
}
function ThemedButton() {
const theme = useContext(ThemeContext)
return <button className={theme}>Current theme: {theme}</button>
}Follow-up Questions
- How does Context differ from Redux?
- Why can Context cause unnecessary re-renders and how do you fix it?
- How do you provide both a value and an updater through context?
- What is the default value in createContext used for?
- When should you avoid using Context?
MCQ Practice
1. Which hook reads a value from a React context?
useContext accepts a Context object and returns the nearest matching Provider's current value.
2. What primary problem does the Context API solve?
Context lets deeply nested components read shared data directly, avoiding passing props through every intermediate layer.
3. When a Provider's value changes, what happens?
Every component that consumes the context re-renders when the Provider's value changes.
Flash Cards
How do you create a context? — Call createContext(defaultValue), which returns a Context object with a Provider.
How do you read context in a component? — Call useContext(MyContext) to get the nearest Provider's current value.
What triggers consumer re-renders? — A change in the Provider's value prop re-renders all consuming components.
Is Context a state manager? — No — it distributes data but has no reducers or middleware; pair it with useState/useReducer.