useMutation's reset() method runs on every other call from inside then() callback

[prajotKeywordio]

Hello everyone

I wanted to try and reset a mutation to its original state after success. I added the reset() function inside the then() callback of the mutation trigger's returned promise.

export const CreatePost = () => {
  const [createPost, { reset }] = useCreatePostMutation();

  const handleClick = () => {
    createPost().then(() => reset());
  };

  return (
    <>
      <button onClick={handleClick}>simulate post creation</button>
    </>
  );
};

However, the hook's state is not being reset after every click, instead it's being reset after every alternate click.
I checked the Redux DevTools inspector and it shows that the removeMutationResult action is not sent on the first click and sent twice on the second click once with the first request's id and once with the second request's id.

I am new to RTK-query and unable to figure this out. Can someone help me find out the reason for this behaviour?
Thanks!

codesandbox

[phryneas]

The problem is that you will only get the reset method for the currently running request in the next render.

createPost().then(() => reset());

reset here is a reference to the reset function that existed before createPost was started.

You could for example work around it like this:

  const [createPost, { reset }] = useCreatePostMutation();

  const resetRef = useRef(reset)
  resetRef.current = reset

  const handleClick = () => {
    createPost().then(() => resetRef.current());
  };

[prajotKeywordio]

Thanks!! This finally helped me understand the behaviour.

[shreyashByteridge]

This helps. Thanks!!