Configuration

// page component
 
function Page() {
  const [user, setUser] = useState(null);
 
  // fetch data
  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);
 
  // global loading state
  if (!user) return <Spinner />;
 
  return (
    <div>
      <Navbar user={user} />
      <Content user={user} />
    </div>
  );
}
 
// child components
 
function Navbar({ user }) {
  return (
    <div>
      ...
      <Avatar user={user} />
    </div>
  );
}
 
function Content({ user }) {
  return <h1>Welcome back, {user.name}</h1>;
}
 
function Avatar({ user }) {
  return (
    <img
      src={user.avatar}
      alt={user.name}
    />
  );
}