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

0•

Herramientas para Desarrolladores

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.

Características Principales

010 GitHub stars

02List virtualization patterns for handling thousands of DOM elements efficiently

03Dynamic code splitting and route-based lazy loading implementation

04Asset optimization techniques including lazy-loaded images and Next.js Image patterns

05Memoization strategies for components, functions, and expensive computations

06State management optimization to minimize component re-renders

Casos de Uso

01Optimizing long-scrolling feeds or large data tables through virtualization

02Eliminating UI stutter and lag in complex, data-heavy React dashboards

03Reducing initial load times and bundle sizes for better SEO and user retention

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivantorresedge/molcajete.ai performance-patterns

For use in Claude.ai and ChatGPT

Download Skill