React Performance

Systematic performance optimization for React and Next.js applications, organized by impact.

Priority 1: Eliminate Waterfalls (CRITICAL)

Sequential async operations are the single biggest performance killer. Fix these first.

Defer Await

Move await to the point of use, not the point of declaration.

// BAD: Sequential — total time = fetch1 + fetch2
async function Page() {
  const user = await getUser();
  const posts = await getPosts(user.id);
  return <Feed user={user} posts={posts} />;
}