vercel-react-best-practices

To fix React performance bottlenecks, apply codified best-practice patterns across component design, data fetching, and server components to reduce waterfalls, bundle size, and rendering overhead.

Best practices for reducing bundle size and rendering overhead involve following prioritized, pattern-driven guidelines across 8 categories, including server actions and optimized client and server fetches.

Optimize data fetching in Next.js by applying pattern-driven guidelines for server components and server actions, ensuring safe, verifiable patterns that minimize server and client fetch waterfalls.

Yes, you can use these React and Next.js optimization guidelines as a reference during development and automated code reviews to surface performance improvements and ensure best practices are followed.

You should refactor React components to improve application performance when code reviews or automated checks surface waterfalls, large bundle sizes, or rendering overhead that violate established best-practice patterns.

The most effective way to prevent waterfalls in React and Next.js data fetching is to codify performance guidelines that enforce safe, verifiable patterns across server and client fetches.