useDebounceEffect

作用

一个用于防抖的 useEffect Hook

原理

实现原理主要是调用 lodash 的 debounce 方法，然后依赖于 useDebounceFn。

源码

import { useEffect, useState } from 'react'
import type { DependencyList, EffectCallback } from 'react'
import type { DebounceOptions } from '../useDebounce/debounceOptions'
import useDebounceFn from '../useDebounceFn'
import useUpdateEffect from '../useUpdateEffect'

function useDebounceEffect(
  effect: EffectCallback,
  deps?: DependencyList,
  // 配置防抖的配置参数
  options?: DebounceOptions
) {
  // 设置flag标识，改变的时候才会触发useUpdateEffect中的回调函数执行
  const [flag, setFlag] = useState({})

  // 调用useDebounceFn，返回防抖函数
  const { run } = useDebounceFn(() => {
    setFlag({})
  }, options)

  useEffect(() => {
    return run()
  }, deps)
  // 只有flag变化的时候才会执行
  useUpdateEffect(effect, [flag])
}

export default useDebounceEffect