Skip to content

.tip

· one of the small things

If it happens because the user did something, it is not an effect

An effect that runs on a state change to send an analytics event or show a toast is really an event handler in disguise. It'll fire twice in strict mode, and once too often whenever the state changes for some other reason.

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

Effects are for syncing with something outside React. Anything an interaction causes belongs in its handler.

react