React Performance Perfection Protocol
- 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?).
- 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 ).
- The "Interaction to Next Paint" (INP) Rule
-
Heavy computations (>50ms) must strictly be wrapped in useTransition or moved to a Web Worker.
-
Blocking the main thread for UI updates is Forbidden.
- 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?