Provider Pattern
Last updated: 2026-11-02
Provider Pattern Provider Pattern
The Provider pattern packages the data and the methods that change it into a stateful Provider component plus a matching custom hook: the state lives inside useState or useReducer, it is handed down through a Context, and the outside world only deals with useXxx() reads and writes. The Provider owns the state and decides where it applies, the hook exposes a tidy API, and the components in between never learn that a context exists at all.
| Group | Component Patterns |
|---|---|
| Kind | Pattern |
ℹ️ 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 Ctx = createContext(null)
export function AppProvider({ children }) {
const [state, setState] = useState(initial)
return <Ctx.Provider value={{ state, setState }}>{children}</Ctx.Provider>
}
export const useApp = () => useContext(Ctx) // the matching read hookReturns：No return value; this entry describes an encoding pattern rather than a function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
After clicking the button the cart immediately reads "Cart (1): Apple" — the state is managed in CartProvider while ItemList reads and writes it through useContext.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
