React Refactoring & Performance

Overview

Safe component refactoring, performance optimization, and bundle size reduction for React/Vite/Bun frontends.

Core principle: Write characterization tests before refactoring. Profile before optimizing.

3-strikes rule: If the same refactoring approach fails 3 times, stop. The problem is architectural — escalate to system-design for a deeper review instead of thrashing.

Safe Refactoring Process

1. Write characterization tests — capture current rendering and behavior
2. Refactor — change structure, not user-visible behavior
3. Verify — all tests pass, visual regression check
4. Profile — only optimize what's measurably slow

Component Decomposition