Application-wide configuration
Share a theme, locale, or other ambient configuration with deeply nested components.
React 19+ · Type Alias
Context
createContext defines a context object for passing information through a component tree without explicitly forwarding it as props. Its default value is used only when no matching provider is found above the reader.
How it works
In React, a context object represents a kind of information that components can provide or read. Create it outside components with a default value, provide a value from an ancestor using the context object as a provider in React 19, and read the nearest provided value with useContext. The default is used only when no matching provider exists above the reader.
Syntax
createContext(defaultValue)Parameters
| Name | Type | Description |
|---|---|---|
defaultValue | any | The fallback value used when a component reads the context without a matching provider above it. It is static and does not change. |
Returns
A context object representing the information that components can provide or read.
Key points
- Declare the context at module scope so every component uses the same context object.
- The defaultValue is returned when no matching provider exists above the component reading the context.
- Use null when the application has no sensible fallback value.
- A context's default value does not update; changing values must come from a provider.
- The API returns the context object that providers and readers use.
Common mistakes
- Create contexts at module scope rather than inside component functions.
- Treat the default as a fallback for missing providers, not as dynamic application state.
- The context object identifies what is being provided or read; the current value comes from a provider.
Example: Providing and reading a theme context
import { createContext, useContext } from 'react';
type Theme = 'light' | 'dark';
const ThemeContext = createContext<Theme>('light');
function Toolbar() {
const theme = useContext(ThemeContext);
return <button className={theme}>Save</button>;
}
export default function App() {
return (
<ThemeContext value="dark">
<Toolbar />
</ThemeContext>
);
}Creates a context with a fallback value and provides a theme to a deeply nested component.
When to use it
Complex screen state
Expose state and dispatch functions to a subtree without prop drilling.
Provider-independent fallback
Define a controlled fallback for components rendered outside their intended provider.
Related
useContextuseContext Provider