A hook that provides a flag to be used in promises and other async functions that can be triggered and not yet resolved by the time a component unmounts.

useUnmountCanary.js

// @flow
import { useEffect, useRef } from 'react';

// A hook that provides a flag to be used in promises and other async functions that
// can be triggered and not yet resolved by the time a component unmounts.
//
// For example:
//
//   const isMounted = useUnmountCanary();
//
//   const saveNewTitle = title => {
//     setLoading(true);
//     return saveTitleMutation({ variables: { title })
//       .then(x => {
//         // Calling setLoading() after the component has been unmounted will
//         // make React throw a big nasty console error. This just avoids
//         // setLoading()-ing if the component is no longer around to care.
//         if (isMounted) setLoading(false);
//       });
//   };
//
//   return <button onClick={() => saveNewTitle("Example!")} />;
//
export default function useUnmountCanary(): boolean {
  const isMounted = useRef(true);
  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);
  return isMounted.current;
}