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 Server Components, restructure with component composition so sibling components fetch in parallel instead of sequentially.

Import directly from source files instead of barrel entry points, such as importing from lucide-react/dist/esm/icons/check rather than the package root. In Next.js 13.5+, configure experimental.optimizePackageImports to transform barrel imports automatically at build time.

React.cache() deduplicates calls within a single request, ideal for auth checks and database queries in one render pass. Use an LRU cache like lru-cache for data shared across sequential requests, which works especially well with Vercel Fluid Compute.

Yes, but some manual optimizations become unnecessary. The React Compiler automatically hoists static JSX and optimizes re-renders, though functional setState updates are still recommended for correctness and to prevent stale closure bugs.

Common causes include subscribing to continuous values instead of derived booleans, wide effect dependencies on objects instead of primitives, and reading state only used in callbacks. Use media query hooks, narrow dependencies, and defer state reads to the usage point.

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, when queries are small and fast, or when layout shift from loading to content would harm the user experience.