I am using custom react-query hook to get the data from my server, then with the help of useEffect I am setting that state in a variable, however when I unmount my component sometimes I get error:

Can't perform a React state update on an unmounted component.

I was trying to cleanup my useEffect, but its not working, what can I do?

  const { data, isLoading, isSuccess } = useGetUsersCurrentDiary();

  useEffect(() => {
    let unmounted = false;
    if (!unmounted) {
      if (diary == null) {
        if (data) {
          setDiary(data);
        }
      }
    }
    return () => {
      unmounted = true;
    };
  }, [data]);

CodePudding user response：

1. there is no need to do that with react-query. You can just use the data property returned from useQuery - no need to copy it somewhere else. This will just take away your single source of truth, and you need to keep states in-sync with no benefit.

2. the warning itself will be removed in the next major version of react (react-18), because it is a false warning in many cases - this one included. You can read about this in the React 18 Working Group.

CodePudding user response：

You can use useRef hook to create isMounted flag.

const { data, isLoading, isSuccess } = useGetUsersCurrentDiary();
const isMounted = useRef();

useEffect(() => {
  isMounted.current = true;
    if (isMounted.current) {
      if (diary == null) {
        if (data) {
          setDiary(data);
        }
      }
    }
    return () => {
      isMounted.current = false;
    };
  }, [data]);