Real World Example

Real World: Admin dashboard loading several APIs

A dashboard needs users, orders and revenue at the same time. Loading them in parallel with Promise.all makes the page appear as fast as the slowest request, not the sum of all.

useEffect(() => {
  async function load() {
    try {
      setLoading(true);
      const [users, orders, revenue] = await Promise.all([
        fetch('/api/users/count').then((r) => r.json()),
        fetch('/api/orders/today').then((r) => r.json()),
        fetch('/api/revenue/month').then((r) => r.json()),
      ]);
      setStats({ users, orders, revenue });
    } catch {
      setError('Could not load dashboard');
    } finally {
      setLoading(false);
    }
  }
  load();
}, []);