improve debounce behavior (#104421)
This commit is contained in:
parent
f5c4a05701
commit
a72d0192cb
|
@ -30,12 +30,20 @@ export const useDebouncedValue = <T>(
|
||||||
// Save the initial value
|
// Save the initial value
|
||||||
const initialValue = useRef(value);
|
const initialValue = useRef(value);
|
||||||
|
|
||||||
|
const flushChangesTimeout = useRef<NodeJS.Timeout | undefined>();
|
||||||
|
|
||||||
const onChangeDebounced = useMemo(() => {
|
const onChangeDebounced = useMemo(() => {
|
||||||
const callback = debounce((val: T) => {
|
const callback = debounce((val: T) => {
|
||||||
onChange(val);
|
onChange(val);
|
||||||
unflushedChanges.current = false;
|
// do not reset unflushed flag right away, wait a bit for upstream to pick it up
|
||||||
|
flushChangesTimeout.current = setTimeout(() => {
|
||||||
|
unflushedChanges.current = false;
|
||||||
|
}, 256);
|
||||||
}, 256);
|
}, 256);
|
||||||
return (val: T) => {
|
return (val: T) => {
|
||||||
|
if (flushChangesTimeout.current) {
|
||||||
|
clearTimeout(flushChangesTimeout.current);
|
||||||
|
}
|
||||||
unflushedChanges.current = true;
|
unflushedChanges.current = true;
|
||||||
callback(val);
|
callback(val);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue