[React]常见Hook实现之useUpdateEffect-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41996454/article/details/131956960

useUpdateEffect是一个在组件更新时执行副作用的自定义ReactHook，它在首次渲染时不执行，避免重复初始化操作。实现基于useEffect和useLayoutEffect，通过一个标记判断是否为首次渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useUpdateEffect是一个自定义的React Hook，用于在组件更新时执行副作用。它的实现原理如下：

useEffect和useLayoutEffect：useUpdateEffect内部使用useEffect或useLayoutEffect来注册副作用函数。这两个Hook函数都接受一个回调函数和依赖项数组作为参数。当依赖项数组发生变化或组件更新时，副作用函数会被触发。
初始化阶段：在组件的初始化阶段（即首次渲染）时，useUpdateEffect会记录一个标记（flag），表示当前组件是首次渲染。
更新阶段：在组件的更新阶段，useUpdateEffect会判断当前是否是首次渲染。如果是首次渲染，则不执行副作用函数；如果不是首次渲染，则执行副作用函数。

通过这种方式，useUpdateEffect可以在组件更新时执行副作用函数，而在首次渲染时跳过执行。这在某些场景下很有用，例如当需要在组件首次渲染后执行一些初始化操作，而在后续更新时不再执行这些初始化操作。

function useUpdateEffect(effect, dependencies) {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      effect();
    }
  }, dependencies);
}