vercel-react-best-practices

To optimize React and Next.js performance during a code review, apply prescriptive guidelines for eliminating waterfalls, reducing bundle size, and improving re-render efficiency. This framework helps identify and fix rendering and data-fetching bottlenecks across your components.

The best way to reduce bundle size in a Next.js application is to apply bundle size optimization guidelines during development and refactoring. This involves optimizing imports and deferring non-critical work to ensure your bundles remain lean and efficient.

To eliminate data fetching waterfalls in Next.js pages, apply server and client data fetching optimization patterns. This skill provides concrete examples for refactoring pages to resolve sequential fetching issues and improve server-side performance.

Yes, you can use these best practices to fix re-render efficiency issues in React components. The skill includes specific patterns for rendering performance, memoizing components, and advanced techniques to resolve inefficient re-renders during refactoring.

You need to defer non-critical work in React component development when facing long initial paints and rendering bottlenecks. Deferring this work alongside optimizing imports and fixing waterfalls improves overall application reliability and load times.