useIsMounted

Async work outlives components. A fetch kicked off in an effect can resolve after the user navigated away and the component unmounted — and calling setState at that point does nothing useful and historically warned about "state updates on an unmounted component." useIsMounted hands you a cheap guard: a function you call right before a late setState to check "am I still here?"

Implement useIsMounted(). It returns a stable function isMounted() that reports true while the component is mounted and false after it has unmounted. The function's identity must not change across renders, so it's safe to close over inside async callbacks.

Signature

function useIsMounted() {
  // returns () => boolean  — true while mounted, false after unmount
}

Examples

const isMounted = useIsMounted();
useEffect(() => {
  fetchUser(id).then((user) => {
    if (isMounted()) setUser(user); // skip if we've unmounted
  });
}, [id]);

const isMounted = useIsMounted();
isMounted(); // true now
// ...component unmounts...
isMounted(); // false

Notes

• A ref, not state — mounted-ness is metadata, not render data; store it in a ref so reading or flipping it never triggers a render.
• Flip in an effect's cleanup — set the ref true when the effect runs and false in its cleanup, which fires on unmount.
• Stable function — wrap the reader in useCallback (empty deps) so async closures capture one identity.
• It's a snapshot, not a subscription — calling isMounted() reads the current value; it doesn't re-render anything when the value changes.