Effects are for reaching outside React: a subscription, a timer, an imperative browser API. Everything else I was using them for turned out to be state I could simply derive.

Derived state doesn't need syncing

// before
const [full, setFull] = useState("");
useEffect(() => setFull(`${first} ${last}`), [first, last]);

// after
const full = `${first} ${last}`;

• Transforming props for display? Compute it during render.
• Resetting state when a prop changes? Give the component a key instead.
• Responding to a click? Do the work in the handler, not in an effect that watches the result.

What's left after that pass is small, genuinely external, and much easier to reason about — and the renders-chasing-renders class of bug disappears with it.