isPending() state isn't reset to false if the tracked value hasn't changed.

[kapsule-studio]

Hi! I have a simple implementation of the hook where I track the value of an input and do something after a delay if the value has changed. The value of the input is used somewhere else on the screen. So I use the isPending() method to display an animation to inform the user that their input is being registered, before they can see any change on the screen. Basic UX improvement.

Everything is fine except for the case where you start typing something only to erase it and leave the input's value unchanged. Then the isPending() value stays true. Here are a video showing it in action and a snippet of my code. Note that the two <span /> at the end are meant to show that the issue doesn't come from the implementation inside my <Input /> component. The isPending() remains "frozen" even in the component where the useDebounce() is declared.

Any help would be greatly appreciated, thanks!

Enregistrement.de.l.ecran.2024-07-17.200947.mp4

// more irrelevant things here...
const [input, setInput] = useState(p.value.text)
const [debouncedValue, bouncing] = useDebounce(input, 500)

return (
  <InputWrapper>
    <Label htmlFor={`${p.label}-${id}`} children={p.label} />
    <RadioButtons
      small
      name={`textAlign-${id}`}
      buttons={textAlignRadio}
      onChange={handleTextAlign}
    />
    <Input
      textareaRef={areaRef}
      isTextarea
      noLabelTag
      name={p.label + id}
      className="leading-normal font-xsmall weight-medium"
      dots={bouncing.isPending()}
      defaultValue={p.value.text}
      onChange={e => setInput(e.target.value)}
    />
    {bouncing.isPending() && (
      <span className="text-micro">Bouncing</span>
    )}
    {!bouncing.isPending() && (
      <span className="text-micro">Not Bouncing</span>
    )}
  </InputWrapper>
)

[xnimorz]

Hey @kapsule-studio
thanks for your feedback.

I'll take a look at it in upcoming week

[xnimorz]

Fixed in #180

[xnimorz]

use-debounce@10.0.2

[kapsule-studio]

Thanks for working on it. Unfortunately, there is still a misbehavior 😅 Now, if I type something and quickly erase it but keep typing, when the value gets back to its initial state, isPending() is set to false even though I'm still typing.

It is subtle but you can notice it: value starts as Account. If I type ..., erase it and keep typing, right when the value goes from Account. to Account, which was the initial state, isPending() is set to false whereas I am still typing. You can tell by the animation stopping when the value gets back to its initial state just before starting again If I'm still typing. I expect it to stop only when the debounce delay is passed, no matter the current value.

Note: I seem to be one of the few to be disturbed by that. The project I'm working on won't be finished before a long time.
Don't bother yourself with that issue if you have better to do. Enjoy your holiday, family, hobbies, I'll be just fine.

Still.bugging.mp4