useOptimistic

公式ドキュメント ↗

const [optimisticCount, addOptimistic] = useOptimistic(
  likeCount,
  (current, delta) => current + delta,
);

startTransition(async () => {
  addOptimistic(1); // 即座に画面へ反映
  await sendLikeToServer(); // 実際の通信(時間がかかる)
  setLikeCount((c) => c + 1); // 確定
});

送信が失敗したら、表示も自動的に元へ戻る

startTransition(async () => {
  addOptimistic(newComment); // 即座に一覧へ追加
  const ok = await postToServer(newComment);
  if (!ok) return; // 何もしなければ自動的に元へ戻る
  setComments((prev) => [...prev, newComment]); // 確定
});

投稿するとその場でコメントが表示される(裏側ではわざと約50%の確率で失敗させている)。失敗したときに「元に戻す」コードを自分で書く必要はない。addOptimisticで加えた変更は本物のstateが確定するまでの一時的な仮表示でしかないので、確定しなければ自然に消える。

実際の使いどころ

SNSのいいね・リツイート、チャットの送信中メッセージ、ToDoリストのチェックなど、「まず失敗しない」操作ほどuseOptimisticの効果が大きい。逆に決済のように失敗率が高い・結果が読めない操作には向かない。