hardFrontend

How do Suspense data-fetching waterfalls happen, and how do you avoid them?

Q: How do Suspense data-fetching waterfalls happen, and how do you avoid them?

A **waterfall** is when requests run *sequentially* because each only starts when its component renders (**fetch-on-render**): the parent fetches, renders, the child mounts, the child fetches, and so on. Each round trip is serialized, multiplying latency. fetch-on-render (staircase) vs render-as-you-fetch (parallel) waterfall <rect x="180" y="52" width="110" height="14" rx="4" fill="#ef4444" f

819 views

Understand the problem

Diagnose sequential fetches and apply render-as-you-fetch.

reactsuspenseperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How can the `key` prop be used to deliberately reset component state?

What is server-side rendering (SSR) and when would you use it with React?