sajad torkamani

In a nutshell

  • Callbacks on useMutate fire before the callbacks on mutate.
  • Callbacks on mutate might not fire if the component calling mutate unmounts before the mutation has finished.

When to use useMutation callbacks

For things that are absolutely necessary and logic-related (e.g., query invalidation).

When to use .mutate callbacks

For UI-related things (e.g., redirects or showing toast notifications).

const useUpdateTodo = () =>
    mutationFn: updateTodo,
    // ✅ always invalidate the todo list
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos', 'list'] })

// in the component

const updateTodo = useUpdateTodo()
  { title: 'newTitle' },
  // ✅ only redirect if we're still on the detail page
  // when the mutation finishes
  { onSuccess: () => history.push('/todos') }