useDebounce

作用

用来处理防抖值的 Hook

原理

实现原理主要是调用 lodash 的 debounce 方法。 依赖于 useDebounceFn 这个 hook。

源码

import { useEffect, useState } from 'react'
import useDebounceFn from '../useDebounceFn'
import type { DebounceOptions } from './debounceOptions'

function useDebounce<T>(value: T, options?: DebounceOptions) {
  const [debounced, setDebounced] = useState(value)

  const { run } = useDebounceFn(() => {
    setDebounced(value)
  }, options)

  useEffect(() => {
    run()
  }, [value])

  return debounced
}

export default useDebounce

export interface DebounceOptions {
  wait?: number
  leading?: boolean
  trailing?: boolean
  maxWait?: number
}