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.

[FurkanDGN]

I solved it with optimistic mutation.