React Performance
Overview
Dedicated performance optimization skill for React applications. Covers the full spectrum from build-time optimizations (code splitting, barrel file avoidance) through runtime techniques (memoization, transitions, content-visibility) to diagnostic tooling (React DevTools Profiler, bundle analyzers).
When to use: Reducing Time to Interactive, shrinking bundle size, eliminating re-renders, profiling slow components, optimizing large lists, lazy loading heavy dependencies, auditing React app performance.
When NOT to use: General React component patterns (use react-patterns skill), framework-specific optimizations like Next.js caching (use framework skill), non-React performance (network, database, CDN).
Quick Reference
| Category |
Technique |
Key Points |
| Compiler |
React Compiler |
Automatic memoization at build time; eliminates manual memo/useMemo/useCallback |
| Memoization |
React.memo(Component) |
Wrap components receiving stable primitive props from frequently re-rendering parents |
| Memoization |
useMemo(fn, deps) |
Expensive computations only: sorting, filtering, Set/Map construction |
| Memoization |
useCallback(fn, deps) |
Only when passed to memoized children; use functional setState for stable refs |
| Splitting |
React.lazy(() => import()) |
Lazy-load heavy components with <Suspense> fallback |
| Splitting |
Preload on intent |
Trigger import() on hover/focus for perceived speed |
| Bundle |
Direct imports |
Avoid barrel files; import from specific paths to reduce module count |
| Bundle |
Defer third-party |
Load analytics, logging after hydration |
| Re-renders |
startTransition |
Mark non-urgent updates (search, scroll tracking) as interruptible |
| Re-renders |
Functional setState |
setState(prev => ...) eliminates state dependencies from callbacks |
| Re-renders |
Derived state |
Subscribe to booleans, not continuous values; compute during render |
| Re-renders |
Defer state reads |
Read dynamic state (searchParams) inside callbacks, not at render |
| Rendering |
content-visibility: auto |
Skip layout/paint for off-screen items in long lists |
| Rendering |
Hoist static JSX |
Extract constant elements outside component functions |
| Profiling |
React DevTools Profiler |
Record renders, identify slow components, flamegraph analysis |
| Profiling |
Bundle analyzer |
Visualize chunk sizes, find oversized dependencies |
Common Mistakes
| Mistake |
Correct Pattern |
| Wrapping everything in useMemo/useCallback |
Trust React Compiler first; only memoize expensive computations or memoized-child callbacks |
Memoizing cheap operations like value * 2 |
Skip memo for simple primitives; overhead exceeds recomputation cost |
Importing from barrel files (lucide-react, @mui/material) |
Import directly from specific paths or use optimizePackageImports |
| Loading analytics/tracking in the initial bundle |
Defer with lazy + mounted state to load after hydration |
| Subscribing to continuous values (window width) for boolean checks |
Use useMediaQuery or derived boolean to re-render only on threshold change |
| Referencing state in useCallback dependency array |
Use functional setState setState(prev => ...) for stable callbacks |
Using useEffect to derive state from props |
Compute derived values during render; effects add an extra render cycle |
| Creating new object literals as props on every render |
Hoist static objects outside component; use useMemo for dynamic objects |
| Profiling in development mode |
Always profile production builds; dev mode includes extra warnings that skew results |
Delegation
- Profile and diagnose performance bottlenecks: Use
Explore agent to run React DevTools Profiler, analyze bundle composition, and trace re-render cascades
- Apply performance optimizations to existing code: Use
Task agent to implement code splitting, add memoization boundaries, and optimize rendering
- Plan performance improvement strategy: Use
Plan agent to prioritize optimizations by impact (waterfalls > bundle > re-renders) and create an optimization roadmap
If the react-patterns skill is available, delegate general component architecture and React 19 API questions to it.
Otherwise, recommend: npx skills add oakoss/agent-skills --skill react-patterns
References
- Rendering optimization: memo, useMemo, useCallback, compiler, re-render elimination
- Code splitting: React.lazy, Suspense, dynamic imports, bundle optimization
- Profiling and debugging: DevTools, performance measurement, common bottlenecks
1---2name: react-performance3description: React performance optimization patterns including memoization, code splitting, bundle size reduction, re-render elimination, and profiling. Covers React Compiler automatic optimization, manual memo/useMemo/useCallback targeting, React.lazy with Suspense, barrel file avoidance, content-visibility for large lists, startTransition for non-urgent updates, and React DevTools profiling. Use when optimizing React app performance, reducing bundle size, eliminating unnecessary re-renders, debugging slow components, code splitting, or profiling rendering bottlenecks. Use for performance audit, bundle analysis, re-render diagnosis, lazy loading, virtualization.4license: MIT5---6
7# React Performance
8
9## Overview
10
11Dedicated performance optimization skill for React applications. Covers the full spectrum from build-time optimizations (code splitting, barrel file avoidance) through runtime techniques (memoization, transitions, content-visibility) to diagnostic tooling (React DevTools Profiler, bundle analyzers).
12
13**When to use:** Reducing Time to Interactive, shrinking bundle size, eliminating re-renders, profiling slow components, optimizing large lists, lazy loading heavy dependencies, auditing React app performance.
14
15**When NOT to use:** General React component patterns (use `react-patterns` skill), framework-specific optimizations like Next.js caching (use framework skill), non-React performance (network, database, CDN).
16
17## Quick Reference
18
19| Category | Technique | Key Points |
20| ----------- | ---------------------------- | ------------------------------------------------------------------------------------- |
21| Compiler | React Compiler | Automatic memoization at build time; eliminates manual memo/useMemo/useCallback |
22| Memoization | `React.memo(Component)` | Wrap components receiving stable primitive props from frequently re-rendering parents |
23| Memoization | `useMemo(fn, deps)` | Expensive computations only: sorting, filtering, Set/Map construction |
24| Memoization | `useCallback(fn, deps)` | Only when passed to memoized children; use functional setState for stable refs |
25| Splitting | `React.lazy(() => import())` | Lazy-load heavy components with `<Suspense>` fallback |
26| Splitting | Preload on intent | Trigger `import()` on hover/focus for perceived speed |
27| Bundle | Direct imports | Avoid barrel files; import from specific paths to reduce module count |
28| Bundle | Defer third-party | Load analytics, logging after hydration |
29| Re-renders | `startTransition` | Mark non-urgent updates (search, scroll tracking) as interruptible |
30| Re-renders | Functional setState | `setState(prev => ...)` eliminates state dependencies from callbacks |
31| Re-renders | Derived state | Subscribe to booleans, not continuous values; compute during render |
32| Re-renders | Defer state reads | Read dynamic state (searchParams) inside callbacks, not at render |
33| Rendering | `content-visibility: auto` | Skip layout/paint for off-screen items in long lists |
34| Rendering | Hoist static JSX | Extract constant elements outside component functions |
35| Profiling | React DevTools Profiler | Record renders, identify slow components, flamegraph analysis |
36| Profiling | Bundle analyzer | Visualize chunk sizes, find oversized dependencies |
37
38## Common Mistakes
39
40| Mistake | Correct Pattern |
41| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
42| Wrapping everything in useMemo/useCallback | Trust React Compiler first; only memoize expensive computations or memoized-child callbacks |
43| Memoizing cheap operations like `value * 2` | Skip memo for simple primitives; overhead exceeds recomputation cost |
44| Importing from barrel files (`lucide-react`, `@mui/material`) | Import directly from specific paths or use `optimizePackageImports` |
45| Loading analytics/tracking in the initial bundle | Defer with lazy + mounted state to load after hydration |
46| Subscribing to continuous values (window width) for boolean checks | Use `useMediaQuery` or derived boolean to re-render only on threshold change |
47| Referencing state in useCallback dependency array | Use functional setState `setState(prev => ...)` for stable callbacks |
48| Using `useEffect` to derive state from props | Compute derived values during render; effects add an extra render cycle |
49| Creating new object literals as props on every render | Hoist static objects outside component; use useMemo for dynamic objects |
50| Profiling in development mode | Always profile production builds; dev mode includes extra warnings that skew results |
51
52## Delegation
53
54- **Profile and diagnose performance bottlenecks**: Use `Explore` agent to run React DevTools Profiler, analyze bundle composition, and trace re-render cascades
55- **Apply performance optimizations to existing code**: Use `Task` agent to implement code splitting, add memoization boundaries, and optimize rendering
56- **Plan performance improvement strategy**: Use `Plan` agent to prioritize optimizations by impact (waterfalls > bundle > re-renders) and create an optimization roadmap
57
58> If the `react-patterns` skill is available, delegate general component architecture and React 19 API questions to it.
59> Otherwise, recommend: `npx skills add oakoss/agent-skills --skill react-patterns`
60
61## References
62
63- [Rendering optimization: memo, useMemo, useCallback, compiler, re-render elimination](references/rendering-optimization.md)
64- [Code splitting: React.lazy, Suspense, dynamic imports, bundle optimization](references/code-splitting.md)
65- [Profiling and debugging: DevTools, performance measurement, common bottlenecks](references/profiling-and-debugging.md)
oakoss