No Direct useEffect

Never call useEffect directly. For the rare case of syncing with an external system on mount, use useMountEffect().

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

The only place useEffect may appear directly is inside reusable custom hooks (like useMountEffect itself, or a useData hook when no fetching library is available). Components must never import or call useEffect.

The 6 Rules

Rule 1: Derive state, do not sync it

If you can calculate it from existing state/props, compute it inline.