Avoid prop drilling
A deeply nested component needs shared theme, locale, or display settings without receiving them through every intermediate component.
React 19+ · Function
createContext
createContext creates a context object with a static fallback value. Providers supply values to descendants, which can read the nearest value with useContext.
How it works
Call createContext outside components to define a context object and its static fallback. A provider supplies a value to descendants, while useContext reads the nearest matching value; without a provider, consumers receive the fallback.
Syntax
createContext(defaultValue)Parameters
| Name | Type | Description |
|---|---|---|
defaultValue | any | The static fallback value used when no matching provider exists above a component reading the context. Use null when no meaningful fallback exists. |
Returns
A context object representing the context that components can provide or read.
Key points
- It creates a shared channel for making information available to components without explicitly passing it through every prop boundary.
- Define contexts at module scope so their identity remains stable and can be imported by providers and consumers.
- The argument is the fallback returned when a consumer has no matching provider above it.
- Changing application state does not mutate the created default; dynamic values must come from a provider.
- Use the returned object with provider syntax to supply a value and with useContext to read it.
- Context is useful when many deeply nested descendants need the same ambient value.
Common mistakes
- A default is only used when no matching provider exists, so it should be a meaningful fallback or null.
- Defining the context inside a component creates a new context identity during rendering and prevents stable sharing.
- The context is an identifier for what components provide or read; the current value comes from the provider or fallback.
Example: Creating and providing a theme context
import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function Label() {
const theme = useContext(ThemeContext);
return <span data-theme={theme}>Current theme: {theme}</span>;
}
export default function App() {
return (
<ThemeContext value="dark">
<Label />
</ThemeContext>
);
}Creates a module-level context with a fallback and provides a different value to a descendant.
When to use it
Share ambient application data
Several descendants need access to one application-level value such as the current user or feature configuration.
Provide a fallback
A component tree needs a safe value when rendered outside its normal provider.
Interview questions
QWhat does createContext do, and when is its default value used?
createContext defines a context object and accepts one defaultValue. That value is returned to a consumer when no matching provider exists above it; otherwise the consumer reads the provider's value.
Follow-up: What does the context object store? It does not store the current data; it identifies the context type used by providers and consumers.
QHow is a context normally consumed after creation?
Create the context at module scope, then provide a value from an ancestor and read it with useContext in descendants. This avoids threading the same data through every intermediate component as props.
Follow-up: How can a component receive a value without a provider? useContext returns the static defaultValue supplied when the context was created.
QHow do providers and default values differ?
The provider determines the value visible to descendants, while createContext supplies the fallback for an unprovided tree. In React 19, the context can be rendered directly with a value prop, as in <ThemeContext value="dark">.
Follow-up: What should be passed when there is no sensible fallback? Use null, then handle that absence explicitly in consumers.
Related
useContextuseContextProvider