Does this skill support React 19 and the React Compiler?

Yes, it is specifically designed for React 19 and newer, prioritizing the React Compiler for automatic memoization while providing fallback patterns for manual optimization.

How does state colocation improve performance?

By moving state closer to where it is used, you prevent parent components and their siblings from re-rendering unnecessarily when local data changes.

When should I use virtualization instead of regular rendering?

This skill recommends considering virtualization for lists between 100-500 items and mandates it for lists exceeding 500 items to ensure smooth UI performance.

Can this skill help me find which components are slow?

Yes, it includes a standardized profiling workflow for the React DevTools Profiler to help you record, identify, and measure actual performance bottlenecks.

React Render Optimization

Name: React Render Optimization
Author: yonatangross

byyonatangross

•

Herramientas de Diseño

Optimizes React application performance using the React Compiler, advanced memoization strategies, and list virtualization.

This skill provides a comprehensive framework for diagnosing and fixing React rendering bottlenecks in modern applications (React 19+). It guides developers through a 'Compiler-first' mindset, offering automated patterns for memoization, virtualization via TanStack Virtual for large datasets, and strategic state colocation to minimize re-renders. Whether you are debugging slow UI interactions or scaling complex dashboards, this skill ensures your frontend remains performant and responsive by applying production-ready optimization patterns and standardized profiling workflows.

Características Principales

01Standardized profiling workflow for React DevTools to identify bottlenecks

02Virtualization patterns for high-performance lists using TanStack Virtual

03React Compiler integration for automatic component and reference memoization

04Manual memoization escape hatches for third-party libraries and stable effects

0569 GitHub stars

06Strategic state colocation techniques to reduce component re-render cycles

Casos de Uso

01Migrating legacy manual memoization to modern React Compiler-compatible patterns

02Implementing efficient scrolling for large lists exceeding 500 items

03Reducing unnecessary re-renders in complex React forms or data-heavy dashboards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit render-optimization

For use in Claude.ai and ChatGPT

Download Skill