vercel-react-best-practices

To optimize React and Next.js performance, apply over 50 rules across eight categories including eliminating data waterfalls, reducing bundle size, and improving server-side rendering efficiency. This comprehensive approach targets critical rendering and data fetching bottlenecks.

Eliminate data fetching waterfalls in Next.js by parallelizing data requests and applying advanced server-side fetching patterns. Structured refactoring guidance helps identify sequential client-side fetches and restructure them for optimal loading parallelization.

Reduce React bundle size by applying code-splitting techniques and optimizing component rendering efficiency. Comprehensive best practices provide specific rules for effective code splitting and JavaScript performance improvements to minimize client payload.

Yes, AI agents can use these React best practices for automated code refactoring. The rules are designed to guide AI in code review and generation tasks, ensuring refactored components meet strict performance and code quality standards.

Excessive re-renders in React are caused by unnecessary state updates and poor component memoization. Optimize re-render performance by applying targeted rules for component structuring, state management, and rendering efficiency improvements.