Ask Claude to Implement Optimistic UI Updates in React

Optimistic updates make your UI feel instant — the component updates before the server confirms, then rolls back on error. Getting this right without a library is tricky. Claude handles it cleanly.

I have a like button that calls POST /api/posts/:id/like. Implement optimistic updates so the count increments immediately, then syncs with the server response. Roll back the count and show a toast on error.

Claude generates a hook using useState and a rollback variable, wrapping the fetch in a try/catch with a clean UI revert:

const [likeCount, setLikeCount] = useState(initialCount);

const handleLike = async () => {
  const previous = likeCount;
  setLikeCount(c => c + 1); // optimistic update
  try {
    const { count } = await likePost(postId);
    setLikeCount(count); // sync with server truth
  } catch {
    setLikeCount(previous); // roll back
    toast.error("Couldn't save your like");
  }
};

You can also ask Claude to implement the same pattern using React Query's onMutate / onError for mutation-level optimism — useful when multiple components share the same data:

Rewrite this with React Query's useMutation, using the cache update and rollback pattern with onMutate and onError.

Claude handles the queryClient.setQueryData / queryClient.cancelQueries dance correctly, which is easy to get wrong.

Don't wait for the server — update the UI first and reconcile later.