Don't optimize blindly. Measure first, then apply targeted fixes. Here's the systematic approach we use at Google.
Step 1: Measure
Step 2: Identify the Problem
Unnecessary Re-renders
Expensive Computations
Callback Identity
Step 3: Apply Targeted Fixes
- Virtualization: For long lists (1000+ items), use react-window or @tanstack/virtual
- Code splitting: Lazy load routes and heavy components
- Debounce inputs: Don't trigger re-renders on every keystroke
- State colocation: Move state closer to where it's used
- Context splitting: Split contexts to prevent unnecessary consumer re-renders
What NOT to Optimize
- Don't memo everything — memo has a cost too
- Don't optimize before measuring
- Don't optimize components that render rarely
- Don't optimize if users aren't experiencing issues