react-use

react-use copied to clipboard

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:

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]);

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