vercel-react-best-practices

To optimize React and Next.js performance, apply production-grade best-practice patterns across loading, rendering, and bundle efficiency. This skill provides actionable guidance, examples, and guardrails across eight priority categories to resolve performance bottlenecks during code reviews and refactoring.

Best practices for reducing bundle size and eliminating waterfalls involve applying code-splitting strategies and optimized data-fetch patterns. These techniques reduce sequential data loading, minimize client-side JavaScript, and improve Time to Interactive (TTI) and Largest Contentful Paint (LCP).

Yes, you can use these React performance patterns during code reviews, refactors, and new builds. The guidelines provide actionable strategies and guardrails for server actions and data-fetching, ensuring scalable performance across teams throughout the entire development lifecycle.

To improve client-side data fetching and re-render performance, apply specific optimization patterns from the client-side data fetching and re-render categories. These patterns provide actionable strategies and examples to prevent unnecessary component re-renders and optimize data retrieval logic.

You should apply server actions and advanced rendering patterns when addressing server-side performance bottlenecks. The guidelines cover eight priority categories, offering actionable strategies and practical examples to optimize server execution and implement advanced architectural patterns safely.