vercel-react-best-practices

Execute independent async operations concurrently with Promise.all() instead of sequential awaits. For partial dependencies, use better-all to start each task at the earliest moment, and use Suspense boundaries so layout renders while data streams in.

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 operations 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, such as repeated user lookups within minutes.

Yes, SWR provides automatic request deduplication, caching, and revalidation across component instances. Multiple components calling useSWR with the same key share a single network request instead of each fetching independently.

Common causes include subscribing to continuous values instead of derived booleans, wide effect dependencies on objects instead of primitives, and missing functional setState updates. Narrow dependencies to primitives and use useMemo or derived state to reduce render frequency.

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.