mantine icon indicating copy to clipboard operation
mantine copied to clipboard

useDebouncedCallback with leading: true is triggered again after the delay when called twice in quick succession

Open nakaminekatsuo opened this issue 5 months ago • 0 comments

Dependencies check up

  • [x] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.0.2

What package has an issue?

@mantine/hooks

What framework do you use?

create-react-app (CRA)

In which browsers you can reproduce the issue?

Chrome

Describe the bug

As stated in the title, the callback is invoked again after the delay when leading: true is set.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-54vypd?file=%2Fsrc%2FApp.tsx%3A16%2C21-16%2C41

Possible fix

Check the value of leadingRef.current when executing the flush function, and skip calling handleCallback if it is false.

const flush = () => {
  if (debounceTimerRef.current !== 0) {
    debounceTimerRef.current = 0;
    if (!leadingRef.current) {
      leadingRef.current = true;
    } else {
      handleCallback(...args);
    }
  }
};

Self-service

  • [ ] I would be willing to implement a fix for this issue

nakaminekatsuo avatar May 30 '25 02:05 nakaminekatsuo