How to fix the unmounted component in react hooks

How to fix the error: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

here' the code:

useEffect(() => {          let ignore = false;          setTimeout(() => {              const fetchData = async () => {                  try {                      setLoading(true);                      setError({});                      const response = await getLatest();                      if (!ignore) setData(response['data']);                  } catch (err) {                      setError(err);                  }                  setLoading(false);              };              fetchData();          });          return () => {              ignore = true;          };      }, []);  

The problem here is when I click the home page while loading the data and click the room page. then the error will appeared. How to fix on it?

https://stackoverflow.com/questions/65912281/how-to-fix-the-unmounted-component-in-react-hooks January 27, 2021 at 10:56AM