Performance Optimization Patterns

Core Principles

Optimize strategically, not prematurely. Use React Profiler to identify bottlenecks, then apply targeted optimizations with useRef, useMemo, useCallback, React.memo, and FlatList optimization techniques.

Why: Strategic optimization prevents unnecessary complexity while addressing real performance issues. Measure first, optimize second.

When to Use This Skill

Use performance optimization when:

Profiler shows slow renders (>16ms)
Components re-render unnecessarily
Expensive computations run on every render
List rendering causes lag
Tracking values across renders without triggering updates
Preventing callback recreation
Need to preserve referential equality