Independent awaits in sequenceIndependent awaits in sequence

Why it matters

Each await waits for the previous one even though it doesn't use its result: the latencies add up (a waterfall) on every request.

Fix

Start both, then await together: const [a, b] = await Promise.all([readA(), readB()]).

Credit

• 

  From Vercel

  The react-best-practices skill ranks eliminating async waterfalls with Promise.all as its top-impact rule.

• SD

  From Shu Ding

  Author of better-all, a Promise.all variant that starts each dependent task at the earliest possible moment.

References

• Fetching DataNext.js
• react-best-practices: Promise.all() for independent operationsVercel (vercel-labs/agent-skills)
• Promise.all()MDN Web Docs
• better-all: Better Promise.all with automatic dependency optimizationGitHub (shuding)

See it

Related rules

• next/fetch-in-effectData fetching in an effect