Why does this "cannot update unmounted component" fix work?

Question

I kept getting the Warning: Can't perform a React state update on an unmounted component message on a number of pages I was working on that are written using TypeScript with React. I'd seen a number of forums offering a solution that includes setting a state variable called _isMounted and setting it to true before running any initializing functions. I had done that and kept getting the error but after some experimentation found a solution that works, although I don't know why it works.

This was my first approach. The warning message still displayed with this code in place

const [_isMounted, set_isMounted] = useState<boolean>(false);

useEffect((): () => void => {
    window.addEventListener('resize', updateWindowDimensions);
    updateWindowDimensions();
    set_isMounted(true);

    return (): void => {
        window.removeEventListener('resize', updateWindowDimensions);
    }
}, []);

useEffect((): void => {
    if (_isMounted === true) {
        function1();
        function2();
        function3();
        function4();
        function5();
    }
}, [_isMounted]);

Changing it up by initialziing _isMounted as undefined, setting it to false, and then setting it to true seems to have solved the issue

const [_isMounted, set_isMounted] = useState<boolean>();

useEffect((): () => void => {
    window.addEventListener('resize', updateWindowDimensions);
    updateWindowDimensions();
    set_isMounted(false);

    return (): void => {
        window.removeEventListener('resize', updateWindowDimensions);
    }
}, []);

useEffect((): void => {
    if (_isMounted === false) {
        set_isMounted(true);
    }
}, [_isMounted]);

useEffect((): void => {
    if (_isMounted === true) {
        function1();
        function2();
        function3();
        function4();
        function5();
    }
}, [_isMounted]);

Why would the first approach fail to resolve the issue while the second one succeeded?

Answer 1

Well, to be honest, I am not sure whether the second method actually solved the problem. You are still using _isMounted as a state to check whether or not the component is mounted or dismounted. But in my opinion, you need to use sth like ref for that.

Take a look at this one. If you scroll down, you can find the answer about function components similar to this.

   const _isMounted= useRef(false)

  useEffect(() => {
    _isMounted.current = true;
    return () => { _isMounted.current = false }
  }, []);

I think the second one did not show error because of subtle time difference. _isMounted is updated a little later, and this accidentally prevented function1-function6.

Answer 2

After some additional digging I found the useIsMounted hook which looks to be a much better solution than the method I was using here