vercel-react-best-practices

Start with the highest-impact rules: eliminate async waterfalls using Promise.all() and Suspense boundaries, then reduce bundle size by avoiding barrel file imports and lazy-loading heavy components with next/dynamic. The Skill organizes 64 rules by impact so you address critical issues first.

Start independent promises 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.

Barrel files re-export thousands of modules, costing 200-800ms per import and slowing builds since bundlers cannot tree-shake external packages. Import directly from source paths, or use Next.js 13.5+ optimizePackageImports to transform barrel imports automatically.

Yes, it includes server-side rules for RSC serialization minimization, per-request deduplication with React.cache(), cross-request LRU caching, and authenticating Server Actions like public API routes. These target Next.js App Router architectures specifically.

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, or when queries are small and fast. The trade-off is faster initial paint versus potential layout shift when content loads.

Common causes include defining components inside components, missing functional setState updates, broad effect dependencies, and subscribing to raw state instead of derived values. The Skill's re-render category provides 15 rules with memoization and transition patterns to fix these.