Frontend Async Best Practices

Async Best Practices

Performance optimization patterns for asynchronous JavaScript code. Contains 5 rules focused on eliminating request waterfalls and maximizing parallelism.

Impact: CRITICAL - Waterfalls are the #1 performance killer. Each sequential await adds full network latency.

When to Apply

Reference these guidelines when:

• Writing Remix loaders or actions
• Implementing data fetching logic
• Working with multiple async operations
• Reviewing code for waterfall patterns
• Optimizing response times

Rules Summary

parallel (CRITICAL) — @rules/parallel.md

Use Promise.all() for independent operations.

// Bad: 3 sequential round trips
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

// Good: 1 parallel round trip
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments(),
]);

defer-await (HIGH) — @rules/defer-await.md

Move await into branches where actually used.