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

Import directly from source files instead of barrel files, for example lucide-react/dist/esm/icons/check instead of the package root. In Next.js 13.5+, enable optimizePackageImports in next.config.js 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 when data must persist across sequential requests, such as repeated user lookups over several minutes.

Many rules are framework-agnostic, including re-render optimization, JavaScript performance, and client-side data fetching patterns. Next.js-specific rules cover Server Components, Server Actions, next/dynamic, and the after() API.

Common causes include subscribing to state only used in callbacks, missing memoization of expensive components, and broad effect dependencies. The rerender- rules recommend deriving state during render, using functional setState, and narrowing effect dependencies to primitives.

Tree-shaking fails when libraries are marked external, since bundlers cannot optimize them, and bundling them slows builds significantly. Direct source imports or Next.js optimizePackageImports avoid loading thousands of unused modules entirely.