e81e8a8f71
* Revert "Revert "Merge branch 'main' of https://github.com/Uniswap/interface" (#2912)" This reverts commit 7d343dcfbdf75a2f91d28cefce84e4b1bace7b87. * Revert "deleted files" This reverts commit 097b8361d4c09afd3cb681c4622145c555ced884.
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
|
/**
|
|
* Easy way to debounce the handling of a rapidly changing value, e.g. a changing slider input
|
|
* @param value value that is rapidly changing
|
|
* @param onChange change handler that should receive the debounced updates to the value
|
|
* @param debouncedMs how long we should wait for changes to be applied
|
|
*/
|
|
export default function useDebouncedChangeHandler<T>(
|
|
value: T,
|
|
onChange: (newValue: T) => void,
|
|
debouncedMs = 100
|
|
): [T, (value: T) => void] {
|
|
const [inner, setInner] = useState<T>(() => value)
|
|
const timer = useRef<ReturnType<typeof setTimeout>>()
|
|
|
|
const onChangeInner = useCallback(
|
|
(newValue: T) => {
|
|
setInner(newValue)
|
|
if (timer.current) {
|
|
clearTimeout(timer.current)
|
|
}
|
|
timer.current = setTimeout(() => {
|
|
onChange(newValue)
|
|
timer.current = undefined
|
|
}, debouncedMs)
|
|
},
|
|
[debouncedMs, onChange]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (timer.current) {
|
|
clearTimeout(timer.current)
|
|
timer.current = undefined
|
|
}
|
|
setInner(value)
|
|
}, [value])
|
|
|
|
return [inner, onChangeInner]
|
|
}
|