React Hooks Cheat Sheet/useEffect cleanup

Clean up subscriptions or listeners.

Section: Effect Hooks

useEffect cleanup

tsx
tsx
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);
Explanation

Return a cleanup function to unsubscribe, cancel, or undo the effect on dependency change or unmount.

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Related commands

Same sheet · prioritizing Effect Hooks
useEffect after render
Run side effects after React commits updates.
OpenIn sheettsxsame section
Fetch inside an effect
Fetch client-side data in an effect with cleanup guard.
OpenIn sheettsxsame section
useLayoutEffect before paint
Run a layout-sensitive effect before the browser paints.
OpenIn sheettsxsame section
useInsertionEffect for CSS injection
Insert styles before layout effects.
OpenIn sheettsxsame section
useEffectEvent for non-reactive effect logic
Read latest values in an effect event without re-triggering the effect.
OpenIn sheettsxsame section
useState basic state
Create local component state.
OpenIn sheettsx2 tag match