vercel-react-best-practices

To optimize React and Next.js code, apply 58 performance rules across 8 categories including waterfall elimination, bundle size reduction, server-side performance, and re-render optimization to ensure efficient and maintainable applications.

The best way to eliminate data fetching waterfalls in Next.js is to apply non-blocking data fetching patterns and performance optimization rules, ensuring initial bundle sizes are minimized and load times improve.

Yes, you can use AI agents and LLMs to automatically refactor React components by applying structured performance rules, ensuring optimal rendering patterns, memoization, and consistency across your codebase.

Reduce your React application's initial bundle size by following specific bundle size reduction rules, ensuring correct component memoization, and utilizing non-blocking data fetching patterns during feature development.

Your Next.js application suffers from unnecessary re-renders when components are not memoized correctly, a problem solved by applying targeted re-render optimization guidelines to enforce optimal performance patterns.

Yes, this approach covers both client-side and server-side performance in Next.js by providing comprehensive optimization guidelines across 8 categories, targeting waterfall elimination and rendering improvements simultaneously.