vercel-react-best-practices

Optimize React and Next.js performance by applying a structured catalog of best-practice rules for UI rendering, data fetching, and bundle optimization. This approach targets component design, server components, and client-side fetching to eliminate wasted renders and reduce bottlenecks.

Prevent data fetching waterfalls by applying categorized best-practice rules for server performance and client-side fetching. The guidelines cover eliminating waterfalls through concrete examples in component design and data fetching patterns across React-based projects.

Reduce bundle size in a React application by applying structured bundle optimization rules. The catalog provides actionable patterns for build-time optimizations, including lazy loading and Suspense, to guide automated refactoring and code generation.

You can use these React performance guidelines for ongoing code maintenance, feature development, and code reviews. The comprehensive guideline set across eight categories helps teams maintain peak performance by identifying and fixing bottlenecks during regular development.

Use Suspense and memoization in Next.js server components when optimizing rendering and re-render performance. The guidelines provide concrete examples for applying advanced patterns, server performance rules, and rendering optimizations across React-based projects.