About Me

import { useState } from 'react';

/**
* A custom hook for handling optimistic UI updates with mutations
* 
* @param mutationFn - The function that performs the actual API mutation
* @param onSuccess - Optional callback for successful mutations
* @param onError - Optional callback for failed mutations
* @returns An object containing the mutation function and loading state
*/
export function useOptimisticMutation<T, R>(
 mutationFn: (data: T) => Promise<R>,
 onSuccess?: (data: R) => void,
 onError?: (error: Error, rollbackData: any) => void
) {
 const [isPending, setIsPending] = useState(false);
 
 // The main mutation function with optimistic updates
 const mutate = async (
   data: T, 
   optimisticUpdate: () => void, 
   rollbackFn: (error: Error) => void
 ) => {
   // Store previous state for potential rollback
   setIsPending(true);
   
   try {
     // Apply optimistic update immediately
     optimisticUpdate();
     
     // Perform the actual mutation
     const result = await mutationFn(data);
     
     // Call success callback if provided
     onSuccess?.(result);
     
     return result;
   } catch (error) {
     // If mutation fails, roll back the optimistic update
     rollbackFn(error as Error);
     
     // Call error callback if provided
     onError?.(error as Error, data);
     
     // Re-throw the error for the component to handle if needed
     throw error;
   } finally {
     setIsPending(false);
   }
 };
 
 return {
   mutate,
   isPending
 };
}