useOptimistic源码实现

function useOptimistic(state, updateFn) {
  // 内部状态，用于在过渡期间覆盖用户传入的 state
  const [optimisticState, setOptimisticState] = useState(null);
  // 记录当前是否处于过渡期的标志
  const [isPending, startTransition] = useTransition();

  // 实际返回给用户的“乐观状态”
  // 如果在过渡期内且有乐观更新，则使用乐观值；否则使用原始 state
  const currentOptimisticState = isPending && optimisticState !== null 
    ? optimisticState 
    : state;

  const addOptimistic = (value) => {
    startTransition(() => {
      // 关键：计算乐观状态，它会在过渡期间覆盖原始 state
      const nextOptimisticState = updateFn 
        ? updateFn(state, value) 
        : value;
      setOptimisticState(nextOptimisticState);
    });
  };

  // 注意：当过渡结束后，isPending 变为 false，currentOptimisticState 自动切回 state
  return [currentOptimisticState, addOptimistic];
}