vercel-react-best-practices

React performance optimization involves applying proven guidelines across rendering patterns, data fetching, and code splitting. This Skill identifies bottlenecks in your components and Next.js pages using 45 rules across 8 priority categories, then generates targeted refactor suggestions to improve UI responsiveness and reduce bundle size.

Next.js server components and data fetching strategies significantly impact performance. This Skill covers server/client patterns and waterfalls as core categories, providing automated guidance to optimize your data flow and component architecture for faster page loads.

Yes. Run a quick audit on any React component or Next.js page to surface top bottlenecks. The Skill analyzes your code against 45 performance rules and returns prioritized improvement suggestions with actionable refactor steps and code snippets.

Bundle size optimization reduces the JavaScript shipped to browsers; rendering performance focuses on how fast components update on the client. This Skill addresses both through dedicated categories covering JS performance, rendering strategies, and advanced patterns to avoid common pitfalls.

You can target specific components, pages, or sections. The Skill is applicable to individual React components, Next.js pages, and server components, making it flexible for incremental improvements or comprehensive audits across projects.

Waterfalls occur when data fetching or component rendering happens sequentially instead of in parallel. This Skill identifies waterfall patterns as a priority category and provides refactor suggestions to parallelize requests and improve overall page responsiveness.