Agent skill · software engineering · aiskillstore
react-performance
Performance optimization for React web applications. Use when optimizing renders, implementing virtualization, memoizing components, or debugging performance issues.
Why this skill is useful
Provides specific patterns and code examples for optimizing React performance that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Performance (Web) Problem Statement React performance issues often stem from unnecessary re-renders, unoptimized lists, and expensive computations on the main thread. Understanding React's rendering behavior is key to building performant applications. --- Pattern: Memoization useMemo - Expensive Computations When to use useMemo: Array transformations (filter, sort, map chains) Object creation passed to memoized children Computations with O(n) or higher complexity useCallback - Stable Function References When to use useCallback: Callbacks passed to memoized children Callbacks in dependency arrays Event handlers that would cause child re-renders --- Pattern: React.memo When to use React.memo: List item components Components receiving stable primitive props Components that render frequently but rarely change When NOT to use: Components that always receive new props Simple components (overhead > benefit) Root-level pages --- Pattern: List Virtualization For long lists, render only visible items using react-window or react-virtualized. When to virtualize: Lists with 100+ items Complex item components Scrollable containers with many children --- Pattern: Zustand Selector Optimization Problem: Selecting entire store causes re-render on any state change. --- Pattern: Avoiding Re-Renders Object/Array Stability Children Stability --- Pattern: Code Splitting --- Pattern: Debouncing and Throttling --- Pattern: Image Optimization --- Pattern: Web Workers for Heavy Computation --- Pattern: Detecting Re-Renders React DevTools Profiler 1. Open React DevTools 2. Go to Profiler tab 3. Click record, interact, stop 4. Review "Flamegraph" for render times 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-performance