Skip to content

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

@nakaminekatsuo

Description

@nakaminekatsuo

Dependencies check up

  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedContributions from community are welcome

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions