# Optimistic Updates
**SHOULD** · **ID:** `interactions-optimistic-updates` · **Category:** interactions
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-optimistic-updates
> SHOULD: Optimistic UI; reconcile on response; on failure show error and rollback or offer Undo
Update UI immediately when success is likely; reconcile on response
For actions that usually succeed (like liking a post or adding to cart), update the UI immediately rather than waiting for the server. This makes the interface feel instant. If the request fails, show an error and revert the change or offer an undo option.
## Bad — do not do this
`interactions-optimistic-updates-bad`
```tsx
import { useState } from 'react';
import { Heart } from 'lucide-react';
export function OptimisticUpdatesBad() {
const [liked, setLiked] = useState(false);
const [loading, setLoading] = useState(false);
const handleLike = async () => {
setLoading(true);
await new Promise(resolve => setTimeout(resolve, 1000));
setLiked(!liked);
setLoading(false);
};
return (
Great post about web design!
User waits 1s for server response before seeing feedback
);
}
```
## Good — do this
`interactions-optimistic-updates-good`
```tsx
import { useState } from 'react';
import { Heart } from 'lucide-react';
export function OptimisticUpdatesGood() {
const [liked, setLiked] = useState(false);
const handleLike = async () => {
const previousState = liked;
setLiked(!liked);
try {
await new Promise((resolve, reject) =>
setTimeout(() => Math.random() > 0.2 ? resolve(true) : reject(), 1000)
);
} catch {
setLiked(previousState);
alert('Failed to update. Please try again.');
}
};
return (