React Performance Perfection Protocol

1. Re-render Police

• Strict Rule: Every useEffect, useCallback, and useMemo must 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 Profiler mental 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