Real-time UI Patterns
Apply optimistic updates for instant feedback, use local queuing when offline, and diff incoming data to update only changed items in the UI.
Real-time Means Real-feel UX
Real-time is more than fast — it's responsive, predictable, and forgiving of latency. Three core patterns: optimistic updates, local queuing, and smart diffing.
Optimistic Updates
Update the UI immediately on user action, before the server confirms. Roll back if the server rejects. Makes apps feel instant.
async function likePost(id) {
// 1. Optimistically update UI:
setLikes(l => ({ ...l, [id]: (l[id] || 0) + 1 }));
setLiked(prev => ({ ...prev, [id]: true }));
try {
await fetch(`/api/posts/${id}/like`, { method: 'POST' });
} catch (err) {
// 2. Rollback on failure:
setLikes(l => ({ ...l, [id]: (l[id] || 1) - 1 }));
setLiked(prev => ({ ...prev, [id]: false }));
toast.error('Could not like — please retry');
}
}