Async optimization patterns to eliminate sequential delays.
Quick Reference
CRITICAL priority - Waterfalls are the #1 performance killer.Key patterns:
Use Promise.all() for independent operations (2-10× improvement)
Defer await into branches where actually used
Start promises early, await late
Use Suspense boundaries for streaming (Next.js)
What Are Waterfalls?
Waterfalls occur when async operations run sequentially instead of in parallel. Each sequential await adds full network latency.
Promise.all() for Independent Operations
When operations have no interdependencies, execute concurrently:
Apollo Client: One Operation per Route
Prefer one operation that selects everything the route needs. A second query that waits for the first is a waterfall:
Components below the route declare a Component_prop fragment, take a FragmentType prop, and read it with useFragment, so they add no requests of their own. See Data Fetching. When two pieces of data are independent and have separate lifetimes, give each its own query root; roots mounted together run in parallel.
Defer Await into Branches
Move await into branches where actually used:
Early Returns
Start Promises Early, Await Late
Suspense Boundaries (Next.js)
Use Suspense to stream content:
Common Patterns
Loading Dashboard Data
With Conditional Logic
Measuring Impact
Use browser DevTools Performance tab to identify waterfalls: