No Direct useEffect

Rule: Never call useEffect directly. All 5 replacement patterns below cover every legitimate use case.

useMountEffect — The Only Allowed Effect Wrapper

export function useMountEffect(effect: () => void | (() => void)) {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(effect, []);
}

Use useMountEffect only for one-time external system sync (DOM, third-party widgets, browser APIs). For anything else, use Rules 1-3 or 5.

Rule 1: Derive State, Don't Sync It

Smell: useEffect(() => setX(deriveFromY(y)), [y]) or state that mirrors other state/props.