オプティミスティック更新は、サーバーのリクエストが成功すると仮定して、レスポンスを待つのではなく、UIをすぐに更新するものです。これによりアプリは瞬時に反応しているように見えますが、リクエストが失敗した場合はロールバックして対応する必要があります。
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic: click → update UI INSTANTLY → send request →
if it fails, ROLL BACK the change (feels instant)
ポストへのいいね、Todoの切り替え、チャットメッセージの送信など、高い成功確率のアクションでは、リクエストはほぼ常に成功するため、ラウンドトリップの待機は単なる遅延感を生みます。オプティミスティック更新はこれらを即座に反応しているように見せます。
async function toggleLike(post) {
const previous = post.liked; // 1. SNAPSHOT the old state for rollback
setPost({ ...post, liked: !post.liked }); // 2. update UI optimistically
try {
await api.toggleLike(post.id); // 3. fire the request
} catch (err) {
setPost({ ...post, liked: previous }); // 4. ROLL BACK on failure
showError("Couldn't update — please retry"); // 5. tell the user
}
}
安全のカギは、オプティミスティック変更の前に前の状態をスナップショットして、リクエストが失敗した場合それを復元することです。ロールバックをスキップするとUIがサーバーの状態について虚偽を述べることになり、オプティミスティック更新が引き起こす危険なバグになります。
useMutation({
mutationFn: toggleLike,
onMutate: async (newData) => {
await queryClient.cancelQueries({ queryKey: ["post"] });
const previous = queryClient.getQueryData(["post"]); // snapshot
queryClient.setQueryData(["post"], newData); // optimistic update
return { previous }; // pass snapshot to onError
},
onError: (err, vars, context) => {
queryClient.setQueryData(["post"], context.previous); // rollback
},
onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
React Query はパターンを形式化します：onMutate（スナップショット＋オプティミスティック更新）、onError（ロールバック）、onSettled（真実を確認するリフェッチ）。
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
オプティミスティック更新は、ネットワークを待たずにアプリを瞬時に反応させる強力なUXテクニックですが、ロールバック（スナップショット→復元）を実装し、エラーを表示する場合にのみ安全です。
パターン（スナップショット→更新→失敗時にロールバック→調整）は本質的な知識であり、どうするのか、また安全に実装するにはどうするのか、また安全に実装するにはどうするのか、いつ使用すべきか（成功の可能性が高い低リスクのアクション）対危険な場合（支払い）を理解することが、洗練された信頼性の高いUIと、サーバーの状態を黙ってて虚偽を述べるUIを区別します。