useContext Hook
Overview
If <ThemeContext.Provider> is the radio tower broadcasting the signal, the `useContext` hook is the radio receiver inside your component tuning into that exact frequency.
Prior to React Hooks, consuming context was incredibly ugly. You had to use a complex pattern called 'Render Props' with a <Context.Consumer> component, which created massive blocks of nested, hard-to-read code.
The useContext hook revolutionized this. By simply passing the original Context object (the one you created with createContext) into the hook, it instantly reaches up the component tree, finds the nearest matching Provider, and returns the data currently held in its value prop.
Syntax
import { useContext } from 'react';
// We must import the exact Context object that was created elsewhere
import { ThemeContext } from './App';
function DeeplyNestedButton() {
// We call the hook and pass it the specific Context object.
// React travels UP the tree, finds <ThemeContext.Provider value="dark">
// and assigns the string "dark" to the theme variable.
const theme = useContext(ThemeContext);
return (
<button className={`btn-primary bg-${theme}`}>
Submit
</button>
);
}Common Pitfalls
- Forgetting to Export the Context: You create
const UserContext = createContext()inApp.jsx. InProfile.jsx, you writeuseContext(UserContext)and get an error: 'UserContext is not defined'. You must explicitlyexportthe context object from the file it was created in, andimportit into the file where it is consumed.
Interview Questions
useContext read from?useContext always reads from the closest matching Provider above it in the component tree. This allows you to override context for specific sections of your app (e.g., wrapping a specific sidebar in a 'dark' theme provider, while the rest of the app reads from a 'light' theme provider).
You simply call the hook multiple times. E.g., const theme = useContext(ThemeContext); const user = useContext(UserContext);. This is infinitely cleaner than the old Consumer wrapper pattern.
Real-World Example
Creating a Custom Context Hook: By creating a useAuth() custom hook, consumers don't need to know anything about useContext or the underlying AuthContext object. They just call one simple hook and get the data, with built-in error handling.
// Instead of forcing every component to import useContext AND AuthContext,
// it is an industry standard to export a custom hook from the context file itself.
import { createContext, useContext } from 'react';
const AuthContext = createContext(null);
export function AuthProvider({ children }) { /* ... */ }
// Custom Hook: The ultimate clean API for consumers
export function useAuth() {
const context = useContext(AuthContext);
// Developer Experience: Throw a helpful error if they forgot the Provider!
if (context === null) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
}
// IN ANY COMPONENT:
// import { useAuth } from './AuthContext';
// const { user, logout } = useAuth();Check Your Knowledge
Test your understanding of useContext Hook with these quick questions.