useDebounce.md

useDebounce

该函数接受debounceValue参数和一个delay参数。分别表示要防抖处理的值和延迟时间。

Usage

import { useState, useEffect } from 'react'
import { useDebounce } from '@buzuosheng/hooks'

export default function App() {
  const [text, setText] = useState('Hello')
  const [value] = useDebounce(text, 1000)

  useEffect(() => {
    console.log('Debounced value:', value)
  }, [value])

  return (
    <div>
      <input
        defaultValue={'Hello'}
        onChange={(e) => {
          setText(e.target.value)
        }}
      />
      <p>Actual value: {text}</p>
      <p>Debounced value: {value}</p>
    </div>
  )
}

Reference

const debouncedValue: T = useDebounce(value: T, delay: number);

• value: T - 被处理的值;
• delay: number - 延迟的毫秒数
• debouncedValue: T - 防抖处理后的值