React 19 乐观更新实战：用 useOptimistic 让点赞与评论即时反馈

为什么需要乐观更新

在社交互动场景里，点赞、收藏、发表评论这类操作如果只是等服务器返回成功再刷新界面，用户会明显感觉到卡顿。乐观更新（Optimistic UI）的思路是：先把预期的结果渲染到界面上，再异步提交给服务器；服务器确认成功就保留，失败就自动回滚。React 19 之前我们通常自己维护一个 local 状态来伪装，容易和服务器状态冲突；useOptimistic 把这个模式收进了框架，并且天然和 Suspense、transition 协作。

useOptimistic 的基本形态

它接收两个参数：当前的真实状态，以及一个 reducer 函数（state, optimisticValue) => newState。返回的 optimisticState 在 transition 进行期间会临时应用 reducer 的结果，transition 结束后自动回到真实状态（成功取服务器数据，失败回滚）。

import { useOptimistic, useTransition } from 'react';

type Comment = { id: string; text: string };

function CommentList({ comments }: { comments: Comment[] }) {
  const [optimisticComments, addOptimistic] = useOptimistic(
    comments,
    (state, draft: Comment) => [...state, draft]
  );

  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData: FormData) {
    const text = String(formData.get('text') || '');
    const draft: Comment = { id: `tmp-${Date.now()}`, text };
    startTransition(async () => {
      addOptimistic(draft);
      await saveComment(draft); // 抛错会自动回滚
    });
  }

  return (
    <form action={handleSubmit}>
      <input name="text" />
      <button type="submit" disabled={isPending}>发表</button>
      <ul>
        {optimisticComments.map(c => (
          <li key={c.id}>
            {c.text}
            {c.id.startsWith('tmp-') ? '（发送中…）' : ''}
          </li>
        ))}
      </ul>
    </form>
  );
}

一个可运行的服务端落库函数

上面的 saveComment 可以是任意返回 Promise 的函数。真实工程里它通常调用后端接口，失败时抛错即可触发回滚。

async function saveComment(comment: Comment): Promise<void> {
  const res = await fetch('/api/comments', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(comment),
  });
  if (!res.ok) {
    throw new Error(`保存失败: ${res.status}`);
  }
}

和 TanStack Query 配合

如果项目已经用 TanStack Query 管理服务器状态，可以让乐观更新走 mutate 的 onMutate/onError 钩子，二者职责互补：useOptimistic 负责组件内的即时渲染，queryClient 负责缓存一致性。

const mutation = useMutation({
  mutationFn: saveComment,
  onMutate: async (draft) => {
    await queryClient.cancelQueries({ queryKey: ['comments'] });
    addOptimistic(draft);
  },
  onError: () => {
    queryClient.invalidateQueries({ queryKey: ['comments'] });
  },
});

三个容易踩的坑

• optimistic 状态是只读的，不要直接 setState 它，只能通过 reducer 函数更新。
• 给临时项一个稳定的 key（如 tmp- 前缀 + 时间戳），否则回滚时列表会闪烁或错位。
• useOptimistic 必须包在 transition 里才生效；直接在事件回调里调用不会触发乐观态。