vercel-react-best-practices

Start independent operations immediately without awaiting them, then use Promise.all() to await results together. For partial dependencies, use the better-all library or chain promises so each task starts at the earliest possible moment.

Import directly from source files instead of barrel entry points that re-export thousands of modules. In Next.js 13.5+, use the optimizePackageImports config option to automatically transform barrel imports while preserving TypeScript types.

Use Suspense when only part of the page needs async data, so the layout renders immediately while data streams in. Avoid it for SEO-critical above-the-fold content, layout-determining data, or very fast queries where overhead is not worth it.

Yes, most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side fetching patterns. Next.js-specific rules cover Server Actions, RSC serialization, and next/dynamic imports.

Server Actions are exposed as public endpoints and can be invoked directly, bypassing middleware or layout guards. Always verify authentication and authorization inside each action, and validate inputs with a schema library like zod.

useMemo should not wrap simple expressions with primitive results, as the memoization overhead exceeds the computation cost. Reserve it for expensive derived renders, and prefer deriving state during rendering instead of using effects.