React函数组件乐观更新时忽略Prop变化的Hook实现问题

我明白你遇到的问题了——在乐观更新期间，组件因为多次重渲染（比如GraphQL请求过程中的缓存更新、父组件重渲染）导致临时回显旧的Prop值，破坏了乐观更新的体验。咱们先拆解你当前Hook的问题，再一步步修正它。

你的当前Hook存在的问题 #

1. Ref未同步最新Prop：useRef(incoming)只会在组件第一次渲染时初始化ref.current，后续incoming（即Prop）变化时，不会自动更新ref.current，除非你手动修改。
2. 更新完成后未同步Prop：当你调用setUpdated()切换状态后，ref.current仍然停留在乐观更新时设置的值，没有同步回最新的Prop值。
3. 状态与值的关联逻辑缺失：useMemo依赖state来返回值，但state只是标记状态（INITIAL/UPDATING/UPDATED），没有和实际值的更新逻辑绑定，导致重渲染时无法正确保持乐观值。

修正后的乐观更新Hook #

核心思路是：用Ref保存当前要显示的值，用State标记是否处于乐观更新状态，在非更新状态下自动同步Prop值，更新状态下忽略Prop变化，只使用乐观值。

function useOptimistic(incoming) {
  // 保存当前要渲染的值：乐观更新时用乐观值，非更新时同步Prop
  const currentValueRef = useRef(incoming);
  // 标记是否处于乐观更新状态
  const [isUpdating, setIsUpdating] = useState(false);

  // 非更新状态下，自动同步最新的Prop到Ref
  useEffect(() => {
    if (!isUpdating) {
      currentValueRef.current = incoming;
    }
  }, [incoming, isUpdating]);

  // 触发乐观更新：设置乐观值并标记为更新中
  const setUpdating = (optimisticValue) => {
    setIsUpdating(true);
    currentValueRef.current = optimisticValue;
  };

  // 结束乐观更新：标记为完成，此时会自动同步最新Prop
  const setUpdated = () => {
    setIsUpdating(false);
  };

  return {
    value: currentValueRef.current,
    isUpdating,
    setUpdating,
    setUpdated
  };
}

工作原理说明 #

• 非乐观更新阶段：isUpdating为false，每次incoming（Prop）变化时，useEffect会自动把最新的Prop值同步到currentValueRef，保证组件显示和Prop一致。
• 乐观更新阶段：调用setUpdating(optimisticValue)后，isUpdating变为true，此时useEffect会跳过Prop同步，currentValueRef保持乐观值，即使组件多次重渲染，也会一直显示这个乐观值。
• 更新完成后：调用setUpdated()把isUpdating设为false，useEffect立即同步最新的Prop值到currentValueRef，组件恢复显示Prop的正确值。

结合Toggle组件和GraphQL的使用示例 #

function Toggle({ checked, onToggle }) {
  const { value: optimisticChecked, setUpdating, setUpdated, isUpdating } = useOptimistic(checked);

  const handleToggle = async () => {
    // 立即设置乐观值：取当前值的反
    const newOptimisticValue = !optimisticChecked;
    setUpdating(newOptimisticValue);

    try {
      // 触发GraphQL请求
      await onToggle(newOptimisticValue);
    } catch (error) {
      // 请求失败时，可以选择回滚到原来的Prop值，避免显示错误状态
      setUpdating(checked);
      console.error('Toggle请求失败:', error);
    } finally {
      // 无论成功或失败，结束乐观更新，同步回最新Prop
      setUpdated();
    }
  };

  return (
    <input
      type="checkbox"
      checked={optimisticChecked}
      onChange={handleToggle}
      disabled={isUpdating} // 可选：更新期间禁用，防止重复点击
    />
  );
}

这个方案能完美解决你遇到的问题：在GraphQL请求期间，即使组件重渲染3-4次，也会一直显示乐观更新后的状态，直到请求完成才同步回Prop的最新值，彻底消除中间的异常显示。

内容的提问来源于stack exchange，提问作者Danielo515