useUpdateLayoutEffect

作用

useUpdateLayoutEffect 用法等同于 useLayoutEffect，但是会忽略首次执行，只在依赖更新时执行

原理

通过useRef保存一个标记位初始值为false,在第一次执行完的时候修改标记值为true,在依赖更新的时候判断标记值是否为true,如果为true则执行副作用

源码

import { useLayoutEffect } from 'react'
import { createUpdateEffect } from '../createUpdateEffect'

export default createUpdateEffect(useLayoutEffect)

import { useRef } from 'react'
import type { useEffect, useLayoutEffect } from 'react'

type EffectHookType = typeof useEffect | typeof useLayoutEffect

export const createUpdateEffect: (hook: EffectHookType) => EffectHookType =
  (hook) => (effect, deps) => {
    const isMounted = useRef(false)

    // for react-refresh
    hook(() => {
      return () => {
        isMounted.current = false
      }
    }, [])

    hook(() => {
      if (!isMounted.current) {
        isMounted.current = true
      } else {
        return effect()
      }
    }, deps)
  }

export default createUpdateEffect