vercel-react-best-practices

Use Promise.all() for independent async operations and start promises early in API routes before awaiting them. For partial dependencies, the better-all library maximizes parallelism by starting each task at the earliest possible moment.

Import directly from source files instead of barrel files, since libraries like lucide-react can re-export thousands of modules costing 200-800ms per import. In Next.js 13.5+, use the optimizePackageImports config option to transform barrel imports automatically.

React.cache() deduplicates requests within a single server request, ideal for authentication and database queries. Use an LRU cache like lru-cache for data shared across sequential requests, such as caching user data between button clicks.

Some rules become unnecessary with React Compiler enabled, specifically manual memoization with memo() and useMemo(), and hoisting static JSX elements. The compiler automatically optimizes re-renders and hoists static elements for you.

Using the && operator with a numeric condition renders the falsy value 0 to the DOM. Use an explicit ternary like count > 0 ? <Badge /> : null to render nothing when the count is zero.