react-performance

React Performance Patterns

1. Eliminating Waterfalls -- CRITICAL

1.1 Defer Await Until Needed

Why: Avoid blocking paths that never use the result.

Wrong:

async function handle(id: string, skip: boolean) {
  const data = await fetchData(id)
  if (skip) return { skipped: true }
  return process(data)
}

Right:

async function handle(id: string, skip: boolean) {
  if (skip) return { skipped: true }
  return process(await fetchData(id))
}

1.2 Start Independent Work Immediately

Why: Sequential awaits add full round-trip per call. Fire promises early, await when needed.

Wrong:

const session = await auth()
const config = await fetchConfig()
const data = await fetchData(session.user.id)

Right:

const sessionP = auth(), configP = fetchConfig()
const session = await sessionP
const [config, data] = await Promise.all([configP, fetchData(session.user.id)])

1.3 Promise.all for Independent Operations

Why: N sequential awaits = N round trips; Promise.all = 1.

Wrong: const a = await f1(); const b = await f2() Right: const [a, b] = await Promise.all([f1(), f2()])

1.4 Strategic Suspense Boundaries

Why: Wrap only data-dependent sections so the rest renders immediately.

Wrong:

async function Page() {
  const data = await fetchData() // blocks entire page
  return <div><Header /><DataView data={data} /><Footer /></div>
}

Right:

function Page() {
  return <div><Header /><Suspense fallback={<Skeleton />}><DataView /></Suspense><Footer /></div>
}
async function DataView() { const data = await fetchData(); return <div>{data.content}</div> }

2. Bundle Size -- CRITICAL

2.1 Avoid Barrel File Imports

Why: Barrel re-exports load thousands of modules (200-800ms cold start).

Wrong: import { Check } from 'lucide-react' Right: import Check from 'lucide-react/dist/esm/icons/check' Or use optimizePackageImports in next.config.js.

2.2 Conditional Module Loading

Why: Load heavy modules only when the feature activates.