useEffect cleanup on 'imported' async function

Please don't consider this a duplicate. I have searched many blogs and stuffs but haven't reached to the solution.

First of all, my question is 'how to resolve react state change in unmounted component error, and cancel an async function call that is imported within the useEffect hook?'

I know that you can resolve 'state changed in an unmounted component' error by using clean up function in useEffect. In the cases of async call within useEffect hook, you can do clearTimeout, use cancel token for Axios, create [isMounted] state to flag mounted/unmounted state, and etc. So, at least, I know how to veil the react warning

However, my boss wants not only veiling the warning but also cancelling the async request. Here's the simplified version of code.

import { fetchFunction } from '../../../somewhereInTheDir';

function Page() {
  const [data, setData] = useState([]);
  const [isMounted, setIsMounted] = useState(true);

  async function fetchData() {
    try {
      const data = await fetchFunction(someUri);

      setData(data);
    } catch (error) {
      console.warn(error);
    }
  }

  useEffect(() => {
    if(isMounted) {
      fetchData(ENDPOINT);
    }
    
    return () => {
      setIsMounted(false);
    }
  })
}

The isMounted state veils the warning. So I am seeing nothin in the console, which is a good sign. But this code does not block/cancel data coming from the endpoint when Page component is unmounted. And you cannot use strategies like putting cancel token in the http header, because fetchFunction is from outside.

ps. my boss said using isMounted state as if it were a JavaScript variable could be an anti-pattern from React, since React state change leads to a re-rendering. Is there a better way to veil the warning without using isMounted state?

Solution

You can try this approach instead. Keep track of the mounted status in the hook itself, as well as the conditional setState function.

Also it is important that you include the empty dependency array, otherwise your component will call the hook on every render.

import { fetchFunction } from '../../../somewhereInTheDir';

function Page() {
  const [data, setData] = useState([]);
  const [isMounted, setIsMounted] = useState(true);

  async function fetchData() {
    try {
      return await fetchFunction(someUri);
    } catch (error) {
      console.warn(error);
    }
  }

useEffect(() => { // <- you can't change this to async
  let mounted = true

    // Variant with Promise
    fetchData(ENDPOINT).then(data => {
      if (mounted) setData(data);
    })

    // Variant with async/await
    (async () => {
      const data = await fetchData(ENDPOINT)
      if (mounted) setData(data);
    }())
    
    return () => {
      mounted = false
    }
  }, []) // <- empty dependency array is important here
}

The following article introduces few other methods how to handle the mounting state even if you use multiple useEffect hooks, etc.

https://www.benmvp.com/blog/handling-async-react-component-effects-after-unmount/