frontend-async-waterfalls

What problem does it solve?

This Skill helps developers eliminate async waterfall performance bottlenecks in client and server React code by showing how to defer await, start independent promises early, and share promises across components.

Core Features & Use Cases

• Defer Await When Possible: Move awaits into branches that actually need results to avoid blocking unrelated code paths.
• Dependency-Based Parallelization & Promise.all: Start dependent and independent promises appropriately and aggregate them with Promise.all to reduce latency.
• Suspense Boundaries & Promise Caching: Use Suspense boundaries to render wrapper UI immediately and apply module-level promise caches with React 19 use() to dedupe requests.
• Use Cases: Refactoring server functions, optimizing data fetching in server components, reducing round trips for independent queries, and sharing fetched data across Suspense-wrapped components.

Quick Start

Refactor a React server component to defer nonessential awaits, start independent promises immediately, and wrap slow loads in Suspense so the page shell renders faster.