vercel-react-best-practices

Optimize React and Next.js performance by applying over 45 rules across 8 categories, targeting data fetching waterfalls, bundle size reduction, server-side efficiency, and re-render optimization to fix slow load times.

Data fetching waterfalls cause slow load times by sequencing requests that could run in parallel. Eliminate them in Next.js by applying structured optimization guidelines to fetch data concurrently and improve server-side efficiency.

Reduce React bundle size bloat by following specific optimization rules that minimize unnecessary JavaScript, ensuring components are correctly memoized and only critical code is shipped to the client.

Yes, you can use these React optimization rules for automated code refactoring with AI agents because the guidelines are specifically designed in an agent-friendly format for LLMs to use during code generation and review.

The best way to fix inefficient rendering in React components is to apply targeted optimization rules ensuring components are memoized correctly, reducing unnecessary re-renders and improving overall JavaScript performance.