React Tutorial #10: Context API and State Management
In the previous tutorial, you learned useRef, useMemo, and useCallback. Now let’s solve a common React problem: prop drilling. The Prop Drilling Problem Prop drilling happens when you pass data through many layers of components that don’t actually need it — just to get it to a deeply nested component. // Data needs to go from App → Layout → Header → UserMenu function App() { const [user, setUser] = useState<User | null>({ name: "Alex" }); return <Layout user={user} onLogout={() => setUser(null)} />; } function Layout({ user, onLogout }: LayoutProps) { return <Header user={user} onLogout={onLogout} />; // Layout doesn't use user, just passes it down } function Header({ user, onLogout }: HeaderProps) { return <UserMenu user={user} onLogout={onLogout} />; // Header doesn't use user either } function UserMenu({ user, onLogout }: UserMenuProps) { return <button onClick={onLogout}>{user.name}</button>; } This becomes painful with 5+ levels. The Context API solves this. ...