Agent skill
implementing-optimistic-updates
Teaches useOptimistic hook for immediate UI updates during async operations in React 19. Use when implementing optimistic UI patterns, instant feedback, or reducing perceived latency.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/implementing-optimistic-updates
SKILL.md
Optimistic UI Updates with useOptimistic
- Shows anticipated result immediately
- Reverts to actual state when async completes
- Provides better UX than waiting for server
- Works with
startTransitionfor async operations
javascript
import { useOptimistic, startTransition } from 'react';
function MessageList({ messages, sendMessage }) {
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) => [...state, { ...newMessage, sending: true }]
);
const handleSend = async (text) => {
addOptimisticMessage({ id: Date.now(), text });
startTransition(async () => {
await sendMessage(text);
});
};
return (
<ul>
{optimisticMessages.map((msg) => (
<li key={msg.id}>
{msg.text} {msg.sending && <small>(Sending...)</small>}
</li>
))}
</ul>
);
}
javascript
function LikeButton({ postId, initialLikes }) {
const [optimisticLikes, addOptimisticLike] = useOptimistic(
initialLikes,
(state, amount) => state + amount
);
const handleLike = async () => {
addOptimisticLike(1);
startTransition(async () => {
await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
});
};
return (
<button onClick={handleLike}>
❤️ {optimisticLikes}
</button>
);
}
For comprehensive useOptimistic documentation, see: research/react-19-comprehensive.md lines 182-240.
NEVER
- Mutate state directly in update function
- Use for critical operations that must succeed
- Skip error handling for failed optimistic updates
If handling Prisma transaction errors in optimistic updates, use the handling-transaction-errors skill from prisma-6 for graceful P-code error handling.
Didn't find tool you were looking for?