useUpdateEffect 在 React18 中不起作用

Question

每当我的组件内的特定状态发生变化时，我都需要调用效果回调，但不应在安装阶段调用回调。我创建了一个自定义挂钩 ()。

function useUpdateOnlyEffect(callback){

  const componentJustMounted = useRef(true);
  useEffect(() => {
    if (!componentJustMounted.current) {
      callback();
    }
    componentJustMounted.current = false;
  }, [callback]);
  

}

我在 codesandbox 中创建了一个示例，代码在 React 17 but it is not working in React 18 中运行良好，即在安装期间也会调用效果回调。我检查了 react 18 的变更日志，但找不到解决方案。这是由于 React 18 中引入的 Automatic Batching 造成的吗？

编辑：

这段代码在生产模式或移除严格模式后都可以正常工作。原因是 React 团队计划 remove/add 部分 UI，同时在将来卸载之前保留组件的状态。

With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component:

这只是为了确保我们的组件在未来能够复用。

要了解更多信息，请参阅 Reusable state and follow the github discussions here。

无论如何，如果你添加额外的效果（不确定是否推荐）来重置标志（ref）值，这个钩子在开发版本中也能很好地工作。

useEffect(() => {
    return () => {
      componentJustMounted.current = true;
    };
  }, []);

Answer 1

您的实现是否使用 rooks，是什么版本。 useUpdateEffect 在 rooks v7 中被弃用，它已被删除。

https://react-hooks.org/docs/useUpdateEffect

Answer 2

我觉得跟严格模式有关。在此处查看更新：https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

所以你的组件在开发模式下挂载了两次，在第二次加载时，你的标志是假的。

useUpdateEffect 在 React18 中不起作用

useUpdateEffect is not working in React18

reactjs

react-hooks

react-18