.tip

An effect that runs on a state change to send an analytics event or show a toast is an event handler wearing a disguise, and it will fire twice in strict mode and once too often when the state changes for other reasons.

// no: useEffect(() => { if (submitted) track("submit"); }, [submitted]);
// yes:
async function handleSubmit() { await save(); track("submit"); }

Effects synchronise with something outside React. Everything caused by an interaction belongs in the handler.