Cross-cutting UI settings
Share a theme, locale, or other display preference across a component subtree without threading props through every intermediate component.
React 19+ · Hook
useContext
useContext reads and subscribes a component to a context. It returns the nearest provider's value, or the context's defaultValue when no provider is above the component.
How it works
useContext reads a previously created context and subscribes the calling component to its value. React selects the nearest provider above that component, falls back to the context default when none exists, and re-renders consumers when the value changes.
Syntax
const value = useContext(SomeContext)Parameters
| Name | Type | Description |
|---|---|---|
SomeContext | Context object | The context object previously created with createContext; for example, ThemeContext. |
Returns
The current context value for the calling component: the value from the closest matching provider above it, or the createContext defaultValue when no provider exists.
Key points
- It combines reading a context value with a subscription to subsequent changes.
- The Hook's call returns the current value associated with the supplied context object.
- Provider lookup follows the rendered tree and selects the nearest matching provider above the consumer.
- A consumer does not need to manually synchronize its local copy with context.
- Changing a consumed context value causes React to update the reading components.
- Pass the context object returned by createContext, not an arbitrary value, to useContext.
Common mistakes
- A provider returned by the same component does not affect that component's own useContext call; place the provider above the consumer.
- Nested providers shadow outer providers for consumers beneath them.
- Do not call the Hook inside conditions, loops, or nested functions.
- The createContext default is used only when no matching provider exists above the consumer.
Example: Read a theme from context
import { createContext, useContext, useState } from 'react';
const ThemeContext = createContext('light');
function Button() {
const theme = useContext(ThemeContext);
return <button className={theme}>Save</button>;
}
export default function App() {
const [theme, setTheme] = useState('dark');
return (
<ThemeContext value={theme}>
<Button />
<button onClick={() => setTheme('light')}>Use light theme</button>
</ThemeContext>
);
}Button reads the nearest theme value and updates when App changes the context.
When to use it
Shared application services
Expose application-wide services or configuration such as an API client, authentication state, or feature flags to descendants.
Scoped overrides
Select different values for nested sections by placing a closer provider around each section.
Interview questions
QHow does useContext choose the value it returns?
useContext takes a context object created with createContext and returns the value supplied by the closest matching provider above the calling component. Without such a provider, it returns the context's default value.
Follow-up: What happens when the provider value changes? React automatically re-renders components that read that context, and their returned value stays current.
QWhere may useContext be called, and what does the subscription do?
Call useContext at the top level of a component. The Hook subscribes that component to the context, so React can update it when the context value changes.
Follow-up: Can a provider created in the same component affect that component's call? No; the provider must be above the component making the call.
QWhat is passed to useContext, and how do nested providers work?
The context object is the parameter, such as useContext(ThemeContext). The context itself represents the kind of information being provided or read; its value comes from the nearest provider.
Follow-up: How can a consumer receive a different value from a nested part of the tree? Put a closer matching provider above that consumer; it shadows outer providers.
Related
createContextuseContext.Provider