Can this skill help with React re-render issues?

Yes, it provides specific rules for optimizing state management, using derived state, and applying startTransition for non-urgent updates to minimize unnecessary renders.

How does this skill improve Next.js performance?

It applies Vercel Engineering guidelines to optimize server-side rendering, data fetching, and bundle splitting using techniques like dynamic imports and React.cache.

What is the priority system used by this skill?

The skill categorizes optimizations into 8 priority levels, focusing first on critical impacts like eliminating waterfalls and reducing bundle size before moving to lower-impact JS tweaks.

Is this skill compatible with standard React applications?

While it includes Next.js specific optimizations, many of the rules apply to standard React patterns, data fetching, and general JavaScript performance improvements.

React Performance Best Practices

Name: React Performance Best Practices
Author: jjeremycai

byjjeremycai

Herramientas de Diseño

Optimizes React and Next.js applications using Vercel Engineering guidelines to ensure high-performance code and efficient bundle sizes.

Acerca de

This skill equips Claude with over 40 prioritized performance optimization rules sourced from Vercel Engineering standards for modern React and Next.js development. It provides automated guidance for eliminating async waterfalls, reducing bundle sizes through dynamic imports, and optimizing server-side rendering patterns. Whether refactoring legacy components or building new Next.js App Router pages, this skill ensures your code follows industry-leading patterns for speed, scalability, and optimal user experience.

Características Principales

Minimize client-side re-renders through efficient state management and lazy initialization.
Eliminate async waterfalls with optimized Promise handling and Suspense boundaries.
Optimize server-side performance with React.cache and per-request deduplication.
0 GitHub stars
Reduce bundle sizes using next/dynamic and direct source imports.
Enhance rendering performance using content-visibility and efficient SVG handling.

Casos de Uso

Reviewing React component code to identify and fix unnecessary re-renders or hydration mismatches.
Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores.
Implementing efficient data fetching strategies for complex dashboard applications.

Acerca de

Características Principales

Minimize client-side re-renders through efficient state management and lazy initialization.
Eliminate async waterfalls with optimized Promise handling and Suspense boundaries.
Optimize server-side performance with React.cache and per-request deduplication.
0 GitHub stars
Reduce bundle sizes using next/dynamic and direct source imports.
Enhance rendering performance using content-visibility and efficient SVG handling.

Casos de Uso

Reviewing React component code to identify and fix unnecessary re-renders or hydration mismatches.
Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores.
Implementing efficient data fetching strategies for complex dashboard applications.