Context idea
📚 What is React Context? Context solves the 'prop drilling' problem: when many nested components all need the same data (like the current user, theme, or language), passing props down through every level becomes messy. Context lets one component provide a value that ANY descendant can read -- with…
Appy Says…
Passing a prop through 5 components just to reach the one that needs it is 'prop drilling' — frustrating and messy. React Context lets any component in the tree read a value directly, without threading props through every level.
What is React Context?
React Context is a way to share values (theme, user, language, etc.) with any component in the tree without passing props at every level.
- •
const ThemeContext = React.createContext('light'); - •Provider:
<ThemeContext.Provider value='dark'>...tree...</ThemeContext.Provider> - •Consumer:
const theme = useContext(ThemeContext); - •Any component inside Provider can read the value — no prop passing
- •Context re-renders all consumers when value changes
- •Best for: theme, auth user, locale/language, feature flags
Think of it like a Roblox global broadcast
In Roblox, MessagingService broadcasts a message to ALL players without sending it to each one individually. Context is the same: the Provider broadcasts a value; any component anywhere below it can receive it directly.
How It Works
- •1. Create:
const UserContext = createContext<User | null>(null); - •2. Provide: wrap your app (or subtree) in
<UserContext.Provider value={user}> - •3. Consume anywhere:
const user = useContext(UserContext); - •4. When Provider value changes, all consumers re-render
- •5. Nest multiple contexts for different concerns (theme + auth + locale)
- •6. Create a custom hook:
export const useUser = () => useContext(UserContext);
Real-World Examples
- •Theme toggle: ThemeContext provides 'light'/'dark'; any component reads and applies it
- •Auth user: UserContext provides logged-in user; navbar, profile, settings all read it
- •Shopping cart: CartContext provides items + add/remove functions to any component
- •Applaa: multiple contexts for app state, user preferences, academy progress
Key Facts
- •Context is NOT a replacement for all state — local state (useState) is still best for component-specific data
- •Context re-renders ALL consumers on value change — split contexts by update frequency
- •Zustand/Jotai are popular alternatives that solve Context's performance issues for high-frequency updates
- •React 19 simplifies Context:
<Context value={...}>instead of<Context.Provider value={...}>
Watch Out!
Don't put frequently-changing values (like cursor position or animation frames) in Context — every change re-renders all consumers. Context is best for slow-changing data (current user, theme, locale). For fast-changing state, use Zustand or atoms.
Remember
createContext → Provider (wrap tree with value) → useContext (read anywhere). Best for: theme, auth, locale — anything that's global and changes infrequently.
What You Learned
- •Context: createContext + Provider + useContext — share values without prop drilling
- •Any component inside the Provider tree can read the context value directly
- •Unlocks: theme switching, auth user access, locale, global app state without libraries
Key Facts
- →Context is NOT a replacement for all state — local state (useState) is still best for component-specific data
- →Context re-renders ALL consumers on value change — split contexts by update frequency
- →Zustand/Jotai are popular alternatives that solve Context's performance issues for high-frequency updates
- →React 19 simplifies Context:
<Context value={...}>instead of<Context.Provider value={...}>
Real-World Examples
Remember
createContext → Provider (wrap tree with value) → useContext (read anywhere). Best for: theme, auth, locale — anything that's global and changes infrequently.
Quick Quiz
Context is for?