react-best-practices

React and Next.js performance optimization reduces waterfalls, bundle size, and hydration overhead through component design, data fetching, and rendering patterns. This skill applies 40+ rules across 8 categories to guide automated refactoring and code generation for measurable improvements in UI responsiveness and load times.

Start by reviewing the priority-based patterns targeting your largest bottlenecks—typically waterfalls in data fetching or bundle bloat. The skill consolidates official guidelines into actionable refactoring patterns; apply the top two patterns iteratively, then tackle remaining rules for cumulative gains.

Yes, this skill covers both React and Next.js performance guidelines. Rules address server/client performance, hydration overhead, and bundling specific to Next.js, alongside component design and rendering patterns that apply across both frameworks.

Bundle size and waterfalls are tackled through code-splitting, lazy loading, and data-fetching optimization patterns. This skill provides references and rules that drive automated refactoring to eliminate waterfalls, shrink bundles, and reduce hydration overhead systematically.

The skill enforces rules that guide both automated refactoring tools and manual code reviews. Automated refactoring applies patterns at scale; manual review using the same rules ensures architecture decisions and iterative improvements align with performance best practices.

No dependencies are required. The skill provides references and rules you apply directly to existing React and Next.js projects. Use them to guide code reviews, inform architecture decisions, or integrate with your automated refactoring and code generation tools.