vercel-react-best-practices

Start independent promises immediately without awaiting them, then await Promise.all() at the end. For partial dependencies, use the better-all library or chain promises so dependent fetches start as early as possible, yielding 2-10x improvements.

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

React.cache() deduplicates async work like database queries within a single request only. For data shared across sequential requests, use an LRU cache with a TTL, which works especially well with Vercel Fluid Compute where function instances persist.

Yes, but some manual optimizations become unnecessary. For example, the React Compiler automatically hoists static JSX elements and optimizes re-renders, so rules like manual JSX hoisting are only needed in projects without the compiler.

The && operator renders falsy values like 0 or NaN as text. Use an explicit ternary such as count > 0 ? <Badge /> : null so nothing renders when the condition fails.

Avoid Suspense when 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. The trade-off is faster initial paint versus potential content jumping.