React Performance Perfection Protocol
1. Re-render Police
- Strict Rule: Every
useEffect,useCallback, anduseMemomust have a justified dependency array. - Check:
- Are object/array props creating new references on every render? -> Use useMemo. - Are function props defined inline? -> Move to useCallback or outside component.
- Tool: If available, use
React DevTools Profilermental model (Why did this render?).
2. Bundle Diet
- Strict Rule: No "Barrel File" imports for massive libraries (e.g.,
import {X} from 'lodash'). Use direct paths (import X from 'lodash/X') unless tree-shaking is verified. - Images: No
import img from './large.png'. Use lazy loading or external hosting. - Lazy Loading: Route-level components MUST be lazy loaded (
React.lazy).
3. The "Interaction to Next Paint" (INP) Rule
- Heavy computations (>50ms) must strictly be wrapped in
useTransitionor moved to a Web Worker. - Blocking the main thread for UI updates is Forbidden.
4. Checklist Before Edit
- Will this change cause a parent re-render?
- Am I importing a huge library for a small utility?
- Is this state strictly local, or am I polluting the global store?