react-use icon indicating copy to clipboard operation
react-use copied to clipboard

useDebounce isDebounceReady not correct in some situations

Open johnslemmer opened this issue 3 years ago • 2 comments

What is the current behavior?

Here is a code sandbox that recreates this: https://codesandbox.io/s/react-use-usedebounce-bug-kz1mu

Basically I've got a situation were the isDebounceReady function is not returning consistently a value that I would expect. One character changes to a debounced input field do not appropriate change the isDebounceReady state.

Here is a gif to show what I mean:

usedebounce

johnslemmer avatar Apr 26 '21 19:04 johnslemmer

I have the exact same issue. Very strange.. I am using [email protected].

I replaced it with a simple useEffect with setTimeout/clearTimeout in my component:

// Auto submit form after a delay
useEffect(() => {
  const timeoutId = setTimeout(() => onSubmit(formData), 1000);

  return () => clearTimeout(timeoutId);
}, [onSubmit, formData]);

Rawk avatar Apr 27 '22 14:04 Rawk

In my case this was a problem in useTimeoutFn (which is used under the hood) which doesn't re-render when isReady changes.

mrcljx avatar Oct 21 '22 07:10 mrcljx