React hook that only runs a function if the component is still mounted. React says this is an anti-pattern, but vanilla Promises and async DOM APIs don't give you a way to cancel async actions 🤷‍♂️.

useCallIfMounted.tsx

function useCallIfMounted() {
  let isMounted = React.useRef(false);
  React.useEffect(() => {
    isMounted.current = true;
    return () => isMounted.current = false;
  }, [isMounted]);
  return React.useCallback((fn) => isMounted.current && fn(), [isMounted]);
}