intermediate
Provider pattern
Expose scoped context for cross-tree dependencies while limiting provider breadth, update frequency, and hidden coupling.
Provider exposes dependencies or configuration to a subtree through React Context or similar mechanisms—theme, auth session, feature flags, query clients. Limit provider breadth and update frequency to avoid rerender storms. Split contexts by change rate when one volatile value invalidates the whole tree.
On interviews: design context splitting for auth versus theme. Explain testing with wrapper providers and mocking context values.
Common pitfalls: one mega-context rerendering the app; storing rapidly changing data in context without selectors; providers nested too deeply without documentation.
The trade-off is flexibility versus complexity—know when the simpler path is enough.
Checklist:
- Context value memoized when object identity matters.
- Separate stable and volatile contexts.
- Consumer hooks fail fast outside provider.
- Document expected provider placement in tree.