Implementing Optimistic Updates for a Like Button

Show how to implement optimistic updates in a social media app's 'like' button, allowing the UI to update immediately while the mutation request is being processed.
const queryClient = new QueryClient();
Initializes a new instance of the QueryClient which will be used by React Query for fetching, caching, and updating data.
const useLikePostMutation = () => {
  return useMutation(likePost, {
    onMutate: async (postId) => {
      await queryClient.cancelQueries(['post', postId]);
      const previousPost = queryClient.getQueryData(['post', postId]);
      queryClient.setQueryData(['post', postId], (old) => {
        return {...old, likes: old.likes + 1};
      return { previousPost };
    onError: (err, postId, context) => {
      queryClient.setQueryData(['post', postId], context.previousPost);
    onSettled: (postId) => {
      queryClient.invalidateQueries(['post', postId]);
Defines a mutation using the useMutation hook from React Query that handles the optimistic update for liking a post. Before the mutation is sent to the server, the number of likes is optimistically incremented. If the mutation fails, the previous state is restored.
const LikeButton = ({postId}) => {
  const mutation = useLikePostMutation();

  const handleLike = () => {

  return (
    <button onClick={handleLike} disabled={mutation.isLoading}>
This component renders a like button that uses the useLikePostMutation hook. On click, it triggers the mutation for a specific postId. The button is disabled while the mutation is in progress to prevent duplicate submissions.