Fetch waterfalls — diagnosis and the Promise.all cure

A profile page needs user info (200ms), their posts (300ms), and their follower count (150ms). None of these depend on each other. So why does the page take 650ms instead of 300ms?

What a waterfall is

A fetch waterfall is a series of requests where each one starts only after the previous one completes. The classic React waterfall:

1. Component A mounts, fires fetch('/api/user') in useEffect
2. Response arrives (200ms) — component re-renders, renders child B
3. Component B mounts, fires fetch('/api/posts') in its useEffect
4. Response arrives (300ms) — renders child C
5. Component C fires fetch('/api/followers') (150ms)

Total: 650ms. Yet none of these three fetches depend on each other’s data.

Why waterfalls form

The root cause is data colocation meeting sequential rendering. React renders the component tree top-down. Each component fires its own effect after mounting. The child component cannot mount until the parent renders, which happens only after the parent’s data arrives. Even if child and parent data are independent, the rendering dependency creates a fetch dependency.

The pattern is especially deadly in deeply nested trees: a 5-level component tree with one fetch per level adds 5 sequential round-trips even if every fetch is logically independent.

Fix 1: Promise.all at the parent

The simplest cure: hoist all independent fetches to a common parent and fire them in parallel.

// Bad — waterfall
const user = await fetchUser(id);
const posts = await fetchPosts(id);
const followers = await fetchFollowers(id);

// Good — parallel
const [user, posts, followers] = await Promise.all([
  fetchUser(id),
  fetchPosts(id),
  fetchFollowers(id),
]);

Total time drops from sum to max. With 5 independent 200ms fetches: 1000ms → 200ms.

Fix 2: TanStack Query useQueries

When using a client library, useQueries runs multiple queries in parallel from one hook call:

const results = useQueries({
  queries: [
    { queryKey: ['user', id], queryFn: () => fetchUser(id) },
    { queryKey: ['posts', id], queryFn: () => fetchPosts(id) },
    { queryKey: ['followers', id], queryFn: () => fetchFollowers(id) },
  ],
});

All three fire simultaneously. Each result gets its own loading/error state. The array index matches the query order.

Fix 3: RSC sibling components

In React Server Components, sibling async components fetch in parallel by default because the server can resolve them concurrently:

// Both fetch simultaneously on the server
async function ProfilePage({ id }) {
  return (
    <div>
      <UserCard id={id} />   {/* fetches user */}
      <PostsList id={id} />  {/* fetches posts — in parallel with UserCard */}
    </div>
  );
}

The key: do not await one before rendering the other. Keep them as siblings, let React’s server rendering dispatch them concurrently.