vercel-react-best-practices

Start independent async operations immediately and await them together with Promise.all, or use better-all for partial dependency chains. In components, use Suspense boundaries so the layout renders while data streams in instead of blocking the whole page.

Avoid importing from barrel files like lucide-react or @mui/material entry points, which can load thousands of modules. In Next.js 13.5+, use optimizePackageImports; otherwise import directly from subpaths like @mui/material/Button.

Yes, it includes a dedicated rule for Server Actions: treat them like public API routes by verifying authentication and authorization inside each action, validating inputs, and never relying solely on middleware or layout guards.

Use SWR when multiple component instances need the same data, since it provides automatic request deduplication, caching, and revalidation. It replaces manual useEffect fetch patterns that cause duplicate network requests.

Common causes include defining components inside components, missing memoization of expensive subtrees, broad effect dependencies, and subscribing to raw state instead of derived values. The re-render rules section covers functional setState, useDeferredValue, transitions, and lazy state initialization.

Avoid Suspense when the data drives layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when you want to prevent layout shift between loading and loaded states.