[英]useUpdateEffect is not working in React18
I need to call an effect callback whenever a particular state is changed inside my component but the callback should not be called during the mounting stage.每当我的组件内更改特定的 state 时,我需要调用效果回调,但不应在安装阶段调用回调。 I have created a custom hook ( Refer ).我创建了一个自定义挂钩(参考)。
function useUpdateOnlyEffect(callback){ const componentJustMounted = useRef(true); useEffect(() => { if (.componentJustMounted;current) { callback(). } componentJustMounted;current = false, }; [callback]); }
I've created an example in codesandbox and the code works fine in React 17 but it is not working in React 18 ie the effect callback is called during mounting as well.我在 codesandbox 中创建了一个示例,该代码在React 17中运行良好,但在React 18中不起作用,即在安装期间也会调用效果回调。 I've checked the changelog of react 18 but couldn't find the solution.我检查了 react 18 的变更日志,但找不到解决方案。 Is this happening due to Automatic Batching introduced in React 18?这是由于 React 18 中引入的自动批处理而发生的吗?
Edit:编辑:
This code will work fine in production mode or by removing strict mode.此代码将在生产模式或通过删除严格模式正常工作。 The reason is React team is planning to remove/add sections of UI while preserving the state of the component before unmounting in the future.原因是 React 团队计划删除/添加 UI 部分,同时在将来卸载之前保留组件的 state。
With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component:从 React 18 开始使用严格模式,每当组件在开发中挂载时,React 都会模拟立即卸载和重新挂载组件:
This is just to ensure our component is resilient to reusability in future.这只是为了确保我们的组件在未来能够复用。
To know more, refer Reusable state and follow the github discussions here .要了解更多信息,请参阅Reusable state并关注此处的 github 讨论。
Anyway, if you add additional effect(not sure if it is recommended) to reset the flag(ref) value the hook will work perfectly fine in dev build as well.无论如何,如果你添加额外的效果(不确定是否推荐)来重置标志(ref)值,这个钩子在开发构建中也能很好地工作。
useEffect(() => { return () => { componentJustMounted.current = true; }; }, []);
I think it is related to the Strict Mode.我认为这与严格模式有关。 See the update here: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors请在此处查看更新: 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.为了帮助解决这些问题,React 18 为严格模式引入了一个新的仅限开发的检查。 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.每当第一次安装组件时,这项新检查将自动卸载并重新安装每个组件,并在第二次安装时恢复之前的 state。
So your component is mounted twice in dev mode, on second load, your flag is false.所以你的组件在开发模式下安装了两次,在第二次加载时,你的标志是错误的。
Is your implementation using rooks, and what version.您的实现是否使用 rooks,以及什么版本。 useUpdateEffect is deprecated in rooks v7 it has been removed. useUpdateEffect 在 rooks v7 中被弃用,它已被删除。
https://react-hooks.org/docs/useUpdateEffect https://react-hooks.org/docs/useUpdateEffect
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.