react-best-practices

Search for "use client" occurrences with ripgrep and check whether each component actually uses hooks, browser APIs, or event handlers. The directive should sit at leaf components, never on layouts or pages that only render props and children.

Move the fetch into an async Server Component so data loads on the server without a client round-trip. When multiple fetches are needed, run them in parallel with Promise.all instead of sequential awaits to eliminate waterfalls.

Yes, server actions work in App Router by marking functions with "use server" in dedicated actions.ts files. Always validate input server-side with zod or valibot, check auth inside the action, and call revalidatePath or revalidateTag after mutations.

Common causes are full-library imports like lodash or moment (~70KB each), entire icon packs, and heavy UI frameworks imported at the root. Run ANALYZE=true npx next build to visualize contributors, then use dynamic imports and specific path imports.

Avoid RSC for components that genuinely need useState, useEffect, browser APIs, or event handlers, since those require client interactivity. The review explicitly avoids flagging small interactive leaf components and only targets boundaries placed too high.