How does this skill help with React DevTools?

It provides a structured profiling workflow for using the React DevTools Profiler to identify actual bottlenecks before applying optimizations.

Does it still use useMemo and useCallback?

While it prioritizes the React Compiler, it provides specific patterns for using manual memoization as an 'escape hatch' for third-party libraries or stable effect dependencies.

When should I use virtualization instead of normal lists?

This skill recommends virtualization for lists with over 500 items, and suggests considering it for lists between 100-500 items to maintain smooth UI performance.

Does this skill support React 19?

Yes, it is specifically designed for React 19+ patterns, including the automatic memoization provided by the new React Compiler.

React Render Optimization

Name: React Render Optimization
Author: yonatangross

byyonatangross

•

Design Tools

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

This skill provides a comprehensive toolkit for diagnosing and fixing React rendering bottlenecks in modern applications (React 19+). It guides developers through the 'Compiler-first' workflow, identifying when manual memoization via useMemo and useCallback is necessary as an escape hatch, and implementing efficient list virtualization using TanStack Virtual. By emphasizing data-driven optimization through the React DevTools Profiler and state colocation patterns, it ensures production-scale codebases remain performant and maintainable.

Key Features

01High-performance list virtualization with TanStack Virtual

02Strategic memoization patterns for stable dependencies and 3rd-party libraries

03State colocation strategies to minimize component re-render scope

0469 GitHub stars

05React Compiler (React 19) integration and verification

06Step-by-step React DevTools Profiler debugging workflows

Use Cases

01Implementing virtualization for large datasets exceeding 500+ items

02Debugging and fixing laggy UI components or stuttering list interactions

03Migrating legacy manual memoization to the modern React Compiler workflow

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit render-optimization

For use in Claude.ai and ChatGPT

Key Features

01High-performance list virtualization with TanStack Virtual

02Strategic memoization patterns for stable dependencies and 3rd-party libraries

03State colocation strategies to minimize component re-render scope

0469 GitHub stars

05React Compiler (React 19) integration and verification

06Step-by-step React DevTools Profiler debugging workflows

Use Cases

01Implementing virtualization for large datasets exceeding 500+ items

02Debugging and fixing laggy UI components or stuttering list interactions

03Migrating legacy manual memoization to the modern React Compiler workflow

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit render-optimization

For use in Claude.ai and ChatGPT