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

[artpumpkin]

Hello guys, I'm new to react-query, and so far it has been wonderful.
I just want some help on how to resolve this 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.

It gets thrown when I use the useMutation hook.

import { useMutation } from 'react-query';
import { useCSRF, useRefresh } from 'hooks/useQuery';
import { POST } from 'utils';

const useAuthMutation = () => {
  const _csrf = useCSRF();

  const { mutateAsync: loginMutate } = useMutation(
    (data: { email: string; password: string }) =>
      POST('/admin/login', {
        ...data,
        _csrf,
      }),
  );

  return {
    login: loginMutate,
  };
};

export default useAuthMutation;

Any help or advice will be much appreciated, thank you,

[TkDodo]

can you maybe create a codesandbox example reproducing the problem?

The useMutation hook itself will trigger a state update only if you call the actual mutate or mutateAsync function. It could be something simple like your component that triggers the mutation is unmounted when the mutation returns or so. It's also not an error but rather a warning...

[artpumpkin]

Sorry for the late reply, after some debugging, I noticed that the problem is coming from another component, sorry for the trouble.