React 19 的 Actions 与 useOptimistic 实战

React 19 围绕「表单与异步状态」引入了一套新原语：Actions、useActionState、useOptimistic 与 useFormStatus。它们共同的目标，是把「提交-等待-更新」这套最常见的交互模式变得可控而优雅。

什么是 Actions

Actions 本质是接收表单数据的异步函数，可以运行在客户端或服务端（Server Actions）。与传统 onSubmit 不同，React 会帮你管理它的待处理状态，自动处理竞态与错误。

async function updateName(prev, formData) {
  const name = formData.get('name');
  await updateNameApi(name);
  return { name };
}

const [state, formAction] = useActionState(updateName, { name: '' });

乐观更新：useOptimistic

「先更新 UI，再等服务器确认」是提升体验的关键。useOptimistic 让你声明一个「预期状态」，在异步完成前先渲染它。

const [optimistic, addOptimistic] = useOptimistic(
  messages,
  (state, newMsg) => [...state, newMsg]
);

// 提交时先乐观插入，失败时自动回滚
addOptimistic(tempMsg);
await sendMessage(tempMsg);

如果异步操作失败，React 会自动把状态回滚到真实值，省去了手写回滚逻辑的繁琐。

useFormStatus：感知提交状态

嵌套在表单内的子组件，可以通过 useFormStatus 拿到「是否正在提交」，从而禁用按钮、显示 loading，而无需手动传递状态。

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? '提交中…' : '提交'}</button>;
}

竞态处理

传统异步 UI 最头疼的是竞态：用户快速点击导致旧响应覆盖新状态。Actions 体系天然解决了这一点——只接受最新一次提交的结果，过期的响应会被自动丢弃。

结语

React 19 的这套新原语，把「乐观更新」「提交状态」「竞态处理」这些过去需要大量样板代码的能力，收敛成了声明式的 API。拥抱它们，你的表单与交互代码会清爽很多。