useContext Reading Context
Last updated: 2026-11-02
useContext Reading Context
useContext takes a Context object created by createContext and returns the value of the nearest Provider above it, or the default value when there is no Provider. It lets a deep component grab the data directly, skipping every intermediate layer, and it ends the endless passing of props down the tree. The call itself takes no dependencies, but every consumer re-renders whenever the value changes, so the value is worth keeping stable.
| Group | Component Patterns |
|---|---|
| Kind | Hook |
| Since | React 16.8 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const value = useContext(MyContext)
// MyContext must be the object returned by createContext itself
// value is always exactly the v of <MyContext.Provider value={v}> above⚙️ Parameters
| Context object | The object returned by createContext. Note that you pass the object itself, not the Provider component. |
|---|
Returns：Returns the value of the nearest current Provider; when there is no Provider upstream it returns the default value given to createContext.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The page shows "Current user: Alice"; if you change the value of the Provider to null, Avatar automatically falls back to "Not signed in".💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
