useDebouncedValue

生成防抖值的 Hook

代码演示

基本用法

debouncedValue:

Live Editor

Copy

function Example() { const [value, setValue] = useState() const debouncedValue = useDebouncedValue(value, 500) return ( <div> <Input value={value} onChange={(e) => setValue(e.target.value)} /> <p style={{ marginTop: 20 }}>debouncedValue: { debouncedValue }</p> </div> ) }

function Example() {
  const [value, setValue] = useState()
  const debouncedValue = useDebouncedValue(value, 500)
  return (
    <div>
      <Input value={value} onChange={(e) => setValue(e.target.value)} />
      <p style={{ marginTop: 20 }}>debouncedValue: { debouncedValue }</p>
    </div>
  )
}

API

type UseDebouncedValue = <T>(value: T, wait: number, options?: Options): T

Options

参数	说明	必选	类型	默认值
leading	指定在延迟开始前调用	-	boolean	false
trailing	指定在延迟结束后调用	-	boolean	true
maxWait	设置防抖允许被延迟的最大值	-	number	-