useMountedEffect.ts

readme.md

Asynchronous methods within hooks can lead to issues, where your asynchronous code resolves after your component / hook was unmounted.

This usually causes react warnings, that you cannot set state on an unmounted component.

How to use useMountedEffect

const MyComponent = ({ id }) => {
  const [status, setStatus] = useState();
  const [data, setData] = useState();
  
  useMountedEffect(async (isMounted) => {
    setStatus("LOADIGN");
    try {
      const data = await fetchMyData({ id });
      // only set state if we are still mounted
      if (isMounted()) {
        setData(data);
        setStatus("DONE")
      }
    } catch (e) {
      if (isMounted()) {
        setStatus("ERROR")
      }
    }
  }, [id])
}

useMountedEffect.ts

import { useEffect, useRef, DependencyList } from 'react';

export default function useMountedEffect(
  callback: (isMounted: () => boolean) => void,
  deps?: DependencyList | undefined,
): void {
  const callbackRef = useRef(callback);
  callbackRef.current = callback;  
  
  const mountedRef = useRef(false);
  
  useEffect(() => {
    mountedRef.current = true;
    callbackRef.current(() => mountedRef.current);
    return () => {
      mountedRef.current = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}