As apps grow, state becomes complex. Prop drilling (passing props through many levels) gets messy. React Context API lets you share state globally without props. Learn when to lift state, when to use Context, and how to architect state management.
Problem: prop drilling
| // ❌ Prop drilling: passing props through many levels function App() { const [theme, setTheme] = useState('dark'); return <Layout theme={theme} />; } function Layout({ theme }) { return <Sidebar theme={theme} />; } function Sidebar({ theme }) { return <Nav theme={theme} />; } function Nav({ theme }) { return <Button theme={theme} />; } // ✅ Solution: Context API const ThemeContext = React.createContext(); function App() { const [theme, setTheme] = useState('dark'); return ( <ThemeContext.Provider value={{ theme, setTheme }}> <Layout /> </ThemeContext.Provider> ); } function Button() { const { theme } = useContext(ThemeContext); return <button style={{bg: theme}}>Click</button>; } |
Using Context API
| // Step 1: Create context const UserContext = React.createContext(); // Step 2: Provider component function UserProvider({ children }) { const [user, setUser] = useState(null); const value = { user, setUser }; return ( <UserContext.Provider value={value}> {children} </UserContext.Provider> ); } // Step 3: Wrap app with provider <UserProvider> <App /> </UserProvider> // Step 4: Access in any component function Profile() { const { user, setUser } = useContext(UserContext); return <h1>{user?.name}</h1>; } |
Key takeaways
Lift state up when multiple components need it. Use Context API for global state (theme, auth, etc). Create custom hooks to wrap Context access. For large apps, consider Redux or Zustand. Context is built on closures and functions — leveraging your May JavaScript knowledge.