React Performance Optimization

1---2name: react-performance-optimization3description: React performance optimization patterns using memoization, code splitting, and efficient rendering strategies. Use when optimizing slow React applications, reducing bundle size, or improving user experience with large datasets.4---5 6# React Performance Optimization7 8Expert guidance for optimizing React application performance through memoization, code splitting, virtualization, and efficient rendering strategies.9 10## When to Use This Skill11 12- Optimizing slow-rendering React components13- Reducing bundle size for faster initial load times14- Improving responsiveness for large lists or data tables15- Preventing unnecessary re-renders in complex component trees16- Optimizing state management to reduce render cascades17- Improving perceived performance with code splitting18- Debugging performance issues with React DevTools Profiler19 20## Core Concepts21 22### React Rendering Optimization23React re-renders components when props or state change. Unnecessary re-renders waste CPU cycles and degrade user experience. Key optimization techniques:24- **Memoization**: Cache component renders and computed values25- **Code splitting**: Load code on demand for faster initial loads26- **Virtualization**: Render only visible list items27- **State optimization**: Structure state to minimize render cascades28 29### When to Optimize301. **Profile first**: Use React DevTools Profiler to identify actual bottlenecks312. **Measure impact**: Verify optimization improves performance323. **Avoid premature optimization**: Don't optimize fast components33 34## Quick Reference35 36Load detailed patterns and examples as needed:37 38| Topic | Reference File |39| --- | --- |40| React.memo, useMemo, useCallback patterns | `skills/react-performance-optimization/references/memoization.md` |41| Code splitting with lazy/Suspense, bundle optimization | `skills/react-performance-optimization/references/code-splitting.md` |42| Virtualization for large lists (react-window) | `skills/react-performance-optimization/references/virtualization.md` |43| State management strategies, context splitting | `skills/react-performance-optimization/references/state-management.md` |44| useTransition, useDeferredValue (React 18+) | `skills/react-performance-optimization/references/concurrent-features.md` |45| React DevTools Profiler, performance monitoring | `skills/react-performance-optimization/references/profiling-debugging.md` |46| Common pitfalls and anti-patterns | `skills/react-performance-optimization/references/common-pitfalls.md` |47 48## Optimization Workflow49 50### 1. Identify Bottlenecks51```bash52# Open React DevTools Profiler53# Record interaction → Analyze flame graph → Find slow components54```55 56**Look for:**57- Components with yellow/red bars (slow renders)58- Unnecessary renders (same props/state)59- Expensive computations on every render60 61### 2. Apply Targeted Optimizations62 63**For unnecessary re-renders:**64- Wrap component with `React.memo`65- Use `useCallback` for stable function references66- Check for inline objects/arrays in props67 68**For expensive computations:**69- Use `useMemo` to cache results70- Move calculations outside render when possible71 72**For large lists:**73- Implement virtualization with react-window74- Ensure proper unique keys (not index)75 76**For slow initial load:**77- Add code splitting with `React.lazy`78- Analyze bundle size with webpack-bundle-analyzer79- Use dynamic imports for heavy dependencies80 81### 3. Verify Improvements82```bash83# Record new Profiler session84# Compare before/after metrics85# Ensure optimization actually helped86```87 88## Common Patterns89 90### Memoize Expensive Components91```jsx92import { memo } from 'react';93 94const ExpensiveList = memo(({ items, onItemClick }) => {95  return items.map(item => (96    <Item key={item.id} data={item} onClick={onItemClick} />97  ));98});99```100 101### Cache Computed Values102```jsx103import { useMemo } from 'react';104 105function DataTable({ items, filters }) {106  const filteredItems = useMemo(() => {107    return items.filter(item => filters.includes(item.category));108  }, [items, filters]);109 110  return <Table data={filteredItems} />;111}112```113 114### Stable Function References115```jsx116import { useCallback } from 'react';117 118function Parent() {119  const handleClick = useCallback((id) => {120    console.log('Clicked:', id);121  }, []);122 123  return <MemoizedChild onClick={handleClick} />;124}125```126 127### Code Split Routes128```jsx129import { lazy, Suspense } from 'react';130 131const Dashboard = lazy(() => import('./Dashboard'));132const Reports = lazy(() => import('./Reports'));133 134function App() {135  return (136    <Suspense fallback={<Loading />}>137      <Routes>138        <Route path="/" element={<Dashboard />} />139        <Route path="/reports" element={<Reports />} />140      </Routes>141    </Suspense>142  );143}144```145 146### Virtualize Large Lists147```jsx148import { FixedSizeList } from 'react-window';149 150function VirtualList({ items }) {151  return (152    <FixedSizeList153      height={600}154      itemCount={items.length}155      itemSize={80}156      width="100%"157    >158      {({ index, style }) => (159        <div style={style}>{items[index].name}</div>160      )}161    </FixedSizeList>162  );163}164```165 166## Common Mistakes167 1681. **Over-memoization**: Don't memoize simple, fast components (adds overhead)1692. **Inline objects/arrays**: New references break memoization (`config={{ theme: 'dark' }}`)1703. **Missing dependencies**: Stale closures in useCallback/useMemo1714. **Index as key**: Breaks reconciliation when list order changes1725. **Single large context**: Causes widespread re-renders on any update1736. **No profiling**: Optimizing without measuring wastes time174 175## Performance Checklist176 177Before optimizing:178- [ ] Profile with React DevTools to identify bottlenecks179- [ ] Measure baseline performance metrics180 181Optimization targets:182- [ ] Memoize expensive components with stable props183- [ ] Cache computed values with useMemo (if actually expensive)184- [ ] Use useCallback for functions passed to memoized children185- [ ] Implement code splitting for routes and heavy components186- [ ] Virtualize lists with >100 items187- [ ] Provide stable keys for list items (unique IDs, not index)188- [ ] Split state by update frequency189- [ ] Use concurrent features (useTransition, useDeferredValue) for responsiveness190 191After optimizing:192- [ ] Profile again to verify improvements193- [ ] Check bundle size reduction (if applicable)194- [ ] Ensure no regressions in functionality195 196## Resources197 198- **React Docs - Performance**: https://react.dev/learn/render-and-commit199- **React DevTools**: Browser extension for profiling200- **react-window**: https://github.com/bvaughn/react-window201- **Bundle analyzers**: webpack-bundle-analyzer, rollup-plugin-visualizer202- **Lighthouse**: Chrome DevTools performance audit