Audit and refactor React Effects using official React guidance: keep Effects for external synchronization, separate events from Effects, model each Effect as an independent start/stop process, fix dependency issues by changing code (not suppressing lint rules), and use useEffectEvent only for truly non-reactive Effect logic.
Run a structured review of every useEffect and useLayoutEffect in scope. For each one, decide whether to:
useEffectEvent where appropriate).Apply the smallest behavior-preserving refactor that removes unnecessary Effects and fixes dependency/lifecycle bugs.
Primary references:
useEffect( and useLayoutEffect(.react-hooks/exhaustive-deps.useEffectEvent when needed.useEffectEvent only for non-reactive logic that must read latest props/state without re-synchronizing:
For each audited effect, produce:
file:line and component nameKeep or RemoveRendering-driven sync or Interaction-driven eventreferences/checklist.md and/or React docs)react-hooks/exhaustive-deps to force desired timing.useEffectEvent to avoid legitimate dependencies.useMemo/useCallback unless required for correctness or measured performance.