vercel-react-best-practices

To optimize React and Next.js performance during code reviews, apply prioritized rules across eight categories including bundle size, server-side rendering, and re-render optimization to improve metrics like TTI and FCP.

Best practices for reducing bundle size and eliminating Next.js data fetching waterfalls involve applying prioritized refactoring rules, guiding automated code generation to shrink bundles and speed up server and client rendering.

You can audit an existing React codebase for high-impact improvements by using a quick-start path to identify top-priority performance rules, implementing optimizations like re-render reduction with minimal disruption.

This React performance refactoring approach requires no specific external dependencies or components, providing metadata for safety considerations and enforcing YAML frontmatter to guide development and refactoring tasks.

The best way to stop unnecessary React component re-renders and improve client-side rendering performance is applying advanced pattern rules, providing actionable examples for refactoring data fetching and rendering logic.