Does this skill support Next.js specific optimizations?

Yes, it covers Next.js specific features like the Image component for automatic layout shift prevention and optimized asset delivery.

When should I use React.memo instead of standard components?

Use React.memo when a component renders frequently with the same props and is expensive to re-render. It is most effective when the parent component re-renders often but the child's data remains stable.

How do I fix unnecessary re-renders caused by object props?

The skill suggests using useMemo for stable object references or extracting primitive values in dependency arrays to prevent infinite loops and redundant render cycles.

Does this skill provide guidance on list virtualization?

Yes, it includes implementation patterns for virtualization (like @tanstack/react-virtual) which ensures only the items currently in the viewport are rendered, significantly improving performance for long lists.

React Performance Patterns

Name: React Performance Patterns
Author: IvanTorresEdge

byIvanTorresEdge

개발자 도구

Optimizes React application speed and efficiency using memoization, code splitting, and advanced rendering techniques.

소개

This skill empowers Claude to identify and resolve React performance bottlenecks through a comprehensive set of industry-standard optimization patterns. It provides specific guidance on implementing memoization via React.memo, useMemo, and useCallback, reducing bundle sizes through code splitting, and managing high-density data with virtualization. Following the 'Measure First' philosophy, this skill helps developers fix rendering lags, optimize state management, and improve Core Web Vitals without introducing unnecessary architectural complexity.

주요 기능

0 GitHub stars
List virtualization patterns for handling thousands of DOM elements efficiently
Dynamic code splitting and route-based lazy loading implementation
Asset optimization techniques including lazy-loaded images and Next.js Image patterns
Memoization strategies for components, functions, and expensive computations
State management optimization to minimize component re-renders

사용 사례

Optimizing long-scrolling feeds or large data tables through virtualization
Eliminating UI stutter and lag in complex, data-heavy React dashboards
Reducing initial load times and bundle sizes for better SEO and user retention

소개

주요 기능

0 GitHub stars
List virtualization patterns for handling thousands of DOM elements efficiently
Dynamic code splitting and route-based lazy loading implementation
Asset optimization techniques including lazy-loaded images and Next.js Image patterns
Memoization strategies for components, functions, and expensive computations
State management optimization to minimize component re-renders

사용 사례

Optimizing long-scrolling feeds or large data tables through virtualization
Eliminating UI stutter and lag in complex, data-heavy React dashboards
Reducing initial load times and bundle sizes for better SEO and user retention