vercel-react-best-practices

React and Next.js performance optimization involves eliminating data waterfalls, reducing bundle size, and improving server-side rendering. This skill provides 45 categorized rules across 8 priority-driven categories with concrete examples to guide refactoring components, pages, and data fetching for faster interfaces.

Reducing Next.js bundle size requires applying targeted bundle optimization rules during code review. This skill provides actionable guidelines to identify inefficient imports and dependencies, helping you refactor codebases to achieve smaller, more efficient bundles.

Frequent React re-renders often stem from inefficient data fetching or poor state management. You can fix them by applying specific re-render optimization rules to refactor components, ensuring faster rendering speed and improved reliability across your web app.

Eliminating data waterfalls in Next.js requires applying prioritized server-side and client-side data fetching rules. By restructuring data fetching strategies to prevent sequential blocking requests, you significantly improve overall page loading speed.

Yes, you can use these React best practices for automated code generation and refactoring. The skill includes a quick-start prompt with guardrails and safety checks to guide automated refactoring tasks across modern web apps.

Standardized JavaScript performance rules may require adaptation for highly specific architectural edge cases. While the guidelines cover advanced patterns and concrete examples, complex modern web apps might need manual safety checks beyond the provided automated refactoring guardrails.