React Perf Rules

React & Next.js Performance Review Rules

Prioritized review rules to audit branches for performance regressions.

Severity Classification

P0 (Critical — Must Fix Before Merge)

• Sequential Waterfalls: Unnecessary chained await statements in server components or route handlers that could be parallelized with Promise.all().
• Accidental De-opt of Server Components: Adding 'use client' to layout roots or high-level containers instead of leaf nodes.
• Unbounded Client-Side Lists: Rendering dynamic lists with 100+ items without virtualization or pagination.
• Missing Memoization on Expensive Render Trees: Passing new inline functions/objects as props to expensive or memoized child subtrees.

P1 (High Impact — Strong Recommendation)

• Massive Barrel Imports: Importing icons or utilities from index barrel files that bypass bundler tree-shaking.
• Synchronous Heavy Operations in Route Handlers: Missing after() for non-critical side effects (audit logging, telemetry) in Next.js 15.
• Uncached Cacheable Fetches in Next.js 15: Relying on legacy Next.js 14 caching assumptions without explicit revalidate or cache: 'force-cache'.
• Derived State Synced via useEffect: Storing computed values in useState and setting them in useEffect instead of calculating inline during render.

P2 (Medium / Polish)

• Missing next/image dimensions / priority: Hero images missing priority causing LCP delay.
• Unoptimized Third-Party Scripts: Analytics or chat widgets loaded eagerly rather than lazyOnload.