How should I stop useMutation hook from re-rendering my component?

[dspirovski]

I am using useMutation hook. Every time when I call it, the component is re-rendering, all my data are getting lost and I am getting into trouble. How could I prevent useMutation do not re-render my component?

Here is what I am doing:

1. As first I am importing useMutation hook like this:
   import { useMutation } from 'react-query'

2. Then I am doing destructing like this and I am passing the function that I want to call (in my case updateDetails function which am also importing in the top of the code:
   const { mutate } = useMutation(updateDetails)

3. Then I am calling the mutation inside submit function like this:

const submitHandler = (e) => {
e.preventDefault()
const response = mutate(updateDetails(name, index))
console.log(response)
}
where,

• name is the state from this component
• I am getting index from another component with props.

The problem is that as first the index property is getting the right number, then the component re-renders, and the index is getting undefined and the function crashes.

How should I solve this issue?

Thank you in advance.

[TkDodo]

the component re-renders because useMutation updates with different state once you trigger the mutation. It will go to loading state, so that you can react and display a loading spinner while the mutation is running.

If your component is crashing because of a re-render, then I'm afraid there is something wrong with your component.

[dspirovski]

Can you please do some code refactor and explain me the solution regarding my example, please?

[TkDodo]

Maybe if you show a codesandbox reproduction with your issue?

[yashug]

@TkDodo what if I am not using the loading state in my UI and want to prevent rerendering?

even extracting const {mutate} = useCustomMutation() making the component re-render, though my component is not dependent on loading state

[TkDodo]

not sure why you are worried about re-renders when a mutation is triggered. It re-renders because that's how it's implemented. There is no smart tracking like for queries because it isn't needed 99% of the time. You can always:

• memoize the expensive component underneath:

const {mutate} = useCustomMutation()

return (
  <>
    <ExpensiveButMemoizedComponent />
    <SomeButtonThatTriggersTheMutation onClick={() => mutate() />
  </>

• move the call to useMutation further down the tree, e.g. into SomeButtonThatTriggersTheMutation to re-render smaller components when the re-render happens.

[aquibbaig]

because sometimes when this function is passed as a context variable to a local module, it re-renders the entire module, resetting all its states. which may not be expected always.

[mrdja026]

@TkDodo I am bumping into a similar problem, I have a component that reads URL params and passes them to the useQuery hook, in that component I also have a useMutation hook, that deletes the object.
When the component rerenders because of the state of the useMutation hook, it reads again from the URL params and tries to fetch something which is already deleted.

[TkDodo]

You can disable the query when the mutation isn't idle anymore

[samuellawerentz]

The problem with re-renders is that, any input field within the component that was in focus will loose focus. How to override this? useMutation is causing a re-render.

Is there a way to overcome this? any hack or workaround?

[samuellawerentz]

Found it, use key to avoid re-render or move the input out of render method.

[MiroslavPetrik]

I was losing focus on my chat input after message was submitted with a useMutation & I ended up here. I tried the key hack and was curious why the focus didn't work even by using ref.

My error was stupid - I had <input disabled={isPending} /> and the disabled prop actually dropped the focus, as you can't focus a disabled input. So there is nothing wrong with useMutation.

[FurkanDGN]

I solved it with optimistic mutation.

[youyoumu]

i'm using mutateAsync inside a loop and it trigger a warning because of the rerender

[youyoumu]

my solution is to create separate useMutation hook for this use case and loop inside the mutationFn intead of looping the mutateAsync

[andrastoth-ws]

Sorry for the late answer to this, I came across the question today and had an epiphany over this. You don't need to use tanstack/query for every API calls. I was starting write a contraption to somehow box useMutation into a child component so it doesn't rerender everything when I realized I can just skip it altogether. I was saving some partial data without any need to render anything.

If you don't need to rerender a component just don't use useMutation. If you still need to invalidate some caches, you can still access do it without using useMutation.

import { changeMyStuff } from './api-functions';

export function useChangeMyStuff() {
  const queryClient = useQueryClient();

  // since I want to return an async function I need to resort some ES5 pro hackery
  // to curry the queryClient, but you don't need to complicate it.
  return myStuff.bind(null, queryClient);
}

async function myStuff(queryClient, params) {
  // in case you need the result
  const result = await changeMyStuff(params);
  
  // This totally works! This is entirely optional, I just show that this is possible
  await queryClient.invalidateQueries( { queryKey: ['myStuff'] });
  
  return result;
}

And if you still need to usage the result somewhere you can use something like overmindJS, or redux, or React context.