edbb18afa4
* debounce gif search by 300ms * Throttle it instead --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
27 lines
697 B
TypeScript
27 lines
697 B
TypeScript
import {useEffect, useRef, useState} from 'react'
|
|
|
|
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
|
|
|
export function useThrottledValue<T>(value: T, time?: number) {
|
|
const pendingValueRef = useRef(value)
|
|
const [throttledValue, setThrottledValue] = useState(value)
|
|
|
|
useEffect(() => {
|
|
pendingValueRef.current = value
|
|
}, [value])
|
|
|
|
const handleTick = useNonReactiveCallback(() => {
|
|
if (pendingValueRef.current !== throttledValue) {
|
|
setThrottledValue(pendingValueRef.current)
|
|
}
|
|
})
|
|
|
|
useEffect(() => {
|
|
const id = setInterval(handleTick, time)
|
|
return () => {
|
|
clearInterval(id)
|
|
}
|
|
}, [handleTick, time])
|
|
|
|
return throttledValue
|
|
}
|