Updating a User Profile with useMutation

Demonstrate how to use the useMutation hook to update a user's profile information on a server and optimistically update the UI to reflect the changes immediately.
import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';
Imports necessary from react-query and axios for making HTTP requests.
const useUpdateUserProfile = () => {
  const queryClient = useQueryClient();
  return useMutation(
    userData => axios.put('/api/user/profile', userData),
      onMutate: async newUserProfile => {
        await queryClient.cancelQueries('userProfile');
        const previousUserProfile = queryClient.getQueryData('userProfile');
        queryClient.setQueryData('userProfile', old => ({ ...old, ...newUserProfile }));
        return { previousUserProfile };
      onError: (err, newUserProfile, context) => {
        queryClient.setQueryData('userProfile', context.previousUserProfile);
      onSettled: () => {
Defines a custom hook using useMutation for updating a user's profile. It optimistically updates the UI before the mutation is completed and rolls back on error.
const { mutate: updateUserProfile } = useUpdateUserProfile();

updateUserProfile({ name: 'John Doe', email: '' });
How to use the custom hook in a component to update a user's profile. It triggers the mutation with new user data.