Optimistic form submission — immediate UI with error rollback

Forms that disable the submit button and wait for the server response before updating the UI feel slow and unresponsive. For creates and updates, the server usually succeeds — optimistic submission makes the UI instant and reserves rollback for the rare error case.

Apply the change to local state immediately, then sync with server and rollback on failure:

import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';

interface Comment { id: number; text: string; authorId: number; }

function CommentBox({ postId }: { postId: number }) {
const [text, setText] = useState('');
const queryClient = useQueryClient();

const addComment = useMutation({
mutationFn: (newText: string) =>
fetch(/api/posts/${postId}/comments, {
method: 'POST',
body: JSON.stringify({ text: newText }),
}).then((r) => r.json()),

onMutate: async (newText) => {
await queryClient.cancelQueries({ queryKey: ['comments', postId] });
const previous = queryClient.getQueryData<Comment[]>(['comments', postId]);

// Add a temporary optimistic comment with a fake id
const optimistic: Comment = { id: Date.now(), text: newText, authorId: -1 };
queryClient.setQueryData<Comment[]>(['comments', postId], (old = []) => [
...old,
optimistic,
]);

setText('');
return { previous };
},

onError: (_err, _vars, context) => {
if (context?.previous) {
queryClient.setQueryData(['comments', postId], context.previous);
}
},

onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['comments', postId] });
},
});

return (
<form onSubmit={(e) => { e.preventDefault(); addComment.mutate(text); }}>
<textarea value={text} onChange={(e) => setText(e.target.value)} />
<button type="submit" disabled={addComment.isPending}>Post</button>
</form>
);
}

The optimistic comment appears instantly with a temporary ID. On success, invalidateQueries replaces it with the server-generated comment. On error, the previous snapshot is restored and the user sees the original state with an error to retry.