react-best-practices_skill

Overview

This skill provides Vercel Engineering's React and Next.js performance optimization guidelines to apply when writing, reviewing, or refactoring frontend code. It prioritizes 57 actionable rules across categories like eliminating waterfalls, bundle size, server performance, and re-rendering. Use it to enforce high-impact patterns that reduce load time, server cost, and runtime work.

How this skill works

The skill inspects tasks related to React components, Next.js pages, data fetching, and bundle behavior and matches them to prioritized rules (async-, bundle-, server-, client-, rerender-, rendering-, js-, advanced-). For each matched rule it recommends concrete changes: code patterns to avoid, preferred replacements, and where to apply them (server vs client, build vs runtime). It emphasizes high-impact fixes first (waterfalls and bundle size) and includes examples and migration guidance.

When to use it

• Writing new React components or Next.js pages
• Implementing or changing data fetching (client or server)
• Reviewing pull requests for performance regressions
• Refactoring code to reduce bundle size or server cost
• Improving perceived or actual load times

Best practices

• Eliminate waterfall fetches: start promises early and await only when needed; parallelize independent requests with Promise.all.
• Optimize bundle surface: import modules directly, defer heavy or third-party code with dynamic imports, and conditionally load features.
• Limit client payloads: serialize minimal data to client components and cache server-side results where appropriate.
• Avoid unnecessary re-renders: memoize expensive subtrees, hoist stable defaults, and derive booleans during render rather than effects.
• Prefer non-blocking server patterns: use React.cache, LRU caches for cross-request reuse, and after()-style non-blocking work for background tasks.

Example use cases

• Refactor a page that makes sequential API calls into parallel fetches to cut TTFB.
• Replace a large analytics bundle with a deferred dynamic import that loads post-hydration.
• Convert frequently re-rendering list items into memoized components and use content-visibility for long lists.
• Move authentication and heavy serialization to server actions and serialize only minimal props to the client.
• Add SWR deduplication to client-side hooks to avoid duplicate network requests during rapid interactions.