vercel-react-best-practices

To optimize React and Next.js performance during code review, apply categorized rules for bundle size, data fetching, and render performance. The skill enforces standards-based safety checks and actionable patterns to guide automated refactoring workflows.

Reducing bundle size and eliminating data fetching waterfalls involves parallelizing fetches and deferring non-critical work. This skill provides structured rule sets for bundle size optimization and server-side performance to transform slow server-rendered pages.

Improving client-server data flows and server actions requires applying proper patterns to secure interactions. The framework consolidates Vercel's recommendations into practical guidance for optimizing client-side data fetching and preventing fragile client-server interactions.

Yes, you can use these Vercel best practices to refactor existing React components. The skill applies optimization workflows to scenarios involving React components, Next.js pages, and server actions, ensuring re-render optimization and JavaScript performance improvements.

Slow initial paint and bloated bundles occur when React and Next.js performance patterns are inconsistently applied. Applying actionable frameworks for bundle size optimization and rendering performance resolves these issues during development and refactoring.

While the skill emphasizes eliminating waterfalls through parallel data fetching, you should evaluate safety checks and categorized rules before refactoring. It provides standards-based guidance to determine when deferring non-critical work is more appropriate than parallelizing fetches.