vercel-react-best-practices

To optimize React and Next.js performance, apply categorized patterns across async, bundle, server, and client rendering to reduce bundle size and improve TTI/LCP. The skill provides concrete refactoring steps and guardrails to fix slow initial paint and bloated bundles.

React data fetching and server rendering best practices involve applying specific patterns from the server and async categories. This skill provides actionable refactoring strategies and decision criteria to optimize data fetching and server rendering across components and pages.

Reduce Next.js bundle size during code reviews by applying guardrails and patterns from the bundle and JavaScript categories. This skill consolidates concrete examples and actionable refactoring steps to guide automated optimization and reduce bloated bundles.

Prevent unnecessary React rerenders by applying patterns from the rerender and rendering categories. This skill codifies real-world best practices with concrete examples and guardrails to help engineers accelerate performance-focused development and improve rendering.

You can use these React performance patterns for existing project refactoring as the skill is intended for engineers working on UI performance and refactoring. It provides actionable refactoring strategies and practical use cases to achieve measurable improvements in TTI and LCP.

For advanced frontend JavaScript optimization, this skill covers patterns within the JavaScript and advanced categories. It provides concrete examples and decision criteria to guide automated optimization, addressing performance regressions and long load times in React and Next.js projects.