Should I keep useMutation in useEffect

[doepnern]

So, when I call useMutation in the body of my component, this will cause all children to rerender on every rerender because the returned mutation function changes on every rerender. Should I initialize the mutation in a useEffect or is there another way of preventing all children of rerendering?

`
const queryClient = useQueryClient()

const mutateDelete = useMutation(
({ path }) =>
deleteFileByPath(path),
{
onSettled: (data, error, variables, context) =>
invalidateUserStudys(queryClient),
}
);

return (
<OtherComponent onClick={(path)=>mutateDelete.mutate({path})} />
)
`

[TkDodo]

the mutate function returned form useMutation is referentially stable - just the top level object returned is not.

That being said, I don't understand your example for various reasons, and I don't know how you would initialize something with a useEffect?

1. Only if OtherComponent is memoized with React.memo, functional equality matters. If it's not, it doesn't matter, because it will always re-render.
2. In your example, you pass an inline anonymous function, which will always be a new function identity:
   (path)=>mutateDelete.mutate({path})

to avoid that, either just pass mutate down:

onClick={mutate}

because it is stable, or move the useMutation call into OtherComponent. Don't know why we need to pass something down as props at all 🤷

[doepnern]

Thank you so much for the elaborate answer, in retrospect my question was very pointless.
My component was rerendering and I didnt know why and it turned out it was because a different hook changed, I somehow thought the useMutation hook was causing a rerender when actually another hook was causing the rerender, which then caused the mutation to be recreated.

While I`m at it, can I ask another question:

Would you create a Context wrapping, for example an Admin panel, which initializes all the mutations that the page will need and then consume the mutations in the Components. Or would you rather write a small hook for each of the mutations so each Components calls the useMutation directly?

Meaning, say I have a few hooks like this:

export default function useCreateNewUser() {
  const queryInstance = useQueryInstance();
  return useMutation<void, Error, NewUser>(
    (newUserData: NewUser) => createNewUser(newUserData),
    {
      onSettled: () => invalidateUsers(queryInstance),
    }
  );
}

If I have multiple components in my Admin Panel use this and a few other mutations, would it be smart to have a context initializing these mutations or doesnt it make a difference if I call this hook directly in multiple places

[TkDodo]

I usually go for small custom hooks, like useCreateNewUser