React Hooks Cheat Sheet/useEffectEvent for non-reactive effect logic

Read latest values in an effect event without re-triggering the effect.

Section: Effect Hooks

useEffectEvent for non-reactive effect logic

tsx
tsx
const onVisit = useEffectEvent((visitedUrl: string) => {
  logVisit(visitedUrl, cart.length);
});

useEffect(() => {
  onVisit(url);
}, [url]);
Explanation

Use for event-like logic called from effects that should see fresh values.

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
useEffect cleanup
Clean up subscriptions or listeners.
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
Fetch inside an effect
Fetch client-side data in an effect with cleanup guard.
OpenIn sheettsxsame section
useState basic state
Create local component state.
OpenIn sheettsx2 tag match