createContext Creating Context
Last updated: 2026-11-02
createContext Creating Context
createContext creates a Context object that lets data travel across levels of the tree without threading props through every intermediate component. It ships with a Provider component that broadcasts a value downwards and pairs with useContext on the reading side. It suits genuinely global data such as a theme, a language or the current user. The object itself is the key: useContext locates the matching Provider by identity, so the same context can be created once at module level and consumed from anywhere.
| Group | Component Patterns |
|---|---|
| Kind | API |
| Since | React 16.3 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { createContext } from 'react'
// the default value applies when there is no Provider upstream
const ThemeContext = createContext('light')
<ThemeContext.Provider value="dark">
…every component downstream can read 'dark'…
</ThemeContext.Provider>⚙️ Parameters
| defaultValue | The fallback value returned by useContext when no matching Provider is found downstream; passing undefined explicitly makes a Provider mandatory. |
|---|
Returns：Returns a Context object: it carries the Provider and Consumer components and is itself the key that useContext reads.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The page shows "Hello!" — App uses the Provider to broadcast en to a deep component, and Greeting reads it without receiving a single prop.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
