React Hooks Expert

Priority: P0 (CRITICAL)

Effects sync external systems. Everything else should stay in render, event handlers, or custom hooks.

Rules

• Effects: use useEffect only for subscriptions, timers, network lifecycle, DOM APIs, or other external systems.
• Dependency churn: objects recreated each render cause unstable dependencies; move to primitives, refs, or measured memoization.
• Effect events: use useEffectEvent when effect logic needs current props/state without widening dependencies.
• Refs: store mutable, non-render state in useRef.
• Memoization: add useMemo / useCallback only for measured hotspots or memoized child contracts.
• Concurrency: use startTransition / useDeferredValue for non-urgent updates.
• Fetch cleanup: use AbortController when an effect owns request cancellation.

Verify