Careeroza

Real World Example

Real World: Logged-in user in a social app

The avatar in the navbar, the comment box and the settings page all need the current user. Instead of passing user through App → Layout → Header → Navbar → Avatar, the app puts it in an AuthContext (or Redux).

// Before: drilling
<Layout user={user}><Header user={user}><Avatar user={user} /></Header></Layout>

// After: context
function Avatar() {
  const { user } = useAuth();          // reads it directly
  return <img src={user.photo} alt={user.name} />;
}