如何用 React 19 的 useOptimistic 提升用户体验React 19 带来了一个让人眼前一亮的 Hoo

如何用 React 19 的 useOptimistic 提升用户体验

React 19 带来了一个让人眼前一亮的 Hook——useOptimistic。它让我们能用极少的代码实现乐观更新（Optimistic Update），用户操作后界面即时响应，无需等待服务端返回。

什么是乐观更新？

乐观更新是一种 UI 策略：在用户执行操作时，先假设操作会成功、立即更新界面，等服务端响应后再根据实际结果修正。就像发送微信消息——消息立刻出现在聊天窗口，发送失败时才标红。

useOptimistic 的基本用法

import { useOptimistic } from 'react';

function TodoList({ initialTodos }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    initialTodos,
    (state, newTodo) => [...state, { ...newTodo, pending: true }]
  );

  async function handleAdd(todo) {
    addOptimisticTodo(todo);
    await saveToServer(todo);
  }

  return (
    <ul>
      {optimisticTodos.map((todo) => (
        <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

三个关键细节

reducer 只影响乐观状态——服务端数据更新后，initialTodos 变化会重置乐观状态
错误处理很重要——乐观更新后如果请求失败，需要回滚。React 19 没有内置回滚机制，需要手动处理
与 useTransition 搭配效果更佳——用 startTransition 包裹可以避免乐观更新期间的 loading 闪烁

总结

useOptimistic 让乐观更新从"需要自己管理状态队列"变成了"一个 Hook 搞定"。如果你的应用有大量用户交互需要即时反馈，React 19 这一特性值得第一时间升级使用。

如果你也在用 React 19 的新特性，欢迎在评论区分享你的实践经验！