vercel-react-best-practices

Optimize React and Next.js performance during code reviews by enforcing best practices across waterfalls, bundle size, server-side execution, client data fetching, and re-render cycles. This skill provides prioritized guidance and concrete examples for refactoring components and pages.

Best practices for reducing bundle size in Next.js involve applying JavaScript efficiency checks and bundle optimization patterns. This skill enforces concrete guidelines to identify bottlenecks and refactor automated generation tasks for smaller, more efficient client bundles.

Server-side performance optimization for React components works by enforcing specific checks across data fetch patterns and rendering performance. This skill applies prioritized guidance to prevent waterfalls and improve server-side execution during architecture decisions and refactors.

Yes, you can use these React performance patterns for automated component generation. The skill applies best practices directly to automated generation tasks, ensuring newly created components and pages follow optimized data fetching, re-render, and bundle size guidelines.

Next.js client-side data fetching waterfalls occur when sequential fetches block rendering. This skill enforces best practices to identify and resolve these bottlenecks, providing concrete patterns to restructure data fetching and improve overall web vitals.

Apply re-render optimization in React codebases when components update unnecessarily, degrading rendering performance. This skill enforces checks across JavaScript efficiency and advanced patterns to identify bottlenecks and apply prioritized refactoring guidance.