Clear and concise description of the problem

I'd like to have the possibility of stopping the execution of a debounced function that is already planned to be executed in the future.

Example use case: I have an input control where typing would open a panel for autocompletions/suggestions. The typing keyboard events are debounced so that the panel shows after some delay (may be due to avoid the panel doing unecessary network fetches for example). I would also need the escape key to close the panel straight away and/or cancel the fetch, without waiting. But in that case, if they were some keys pressed just before the escape key, the debounce effect is already running and will ultimately re-opens the closed panel. Ideally, I'd like to cancel the planned debounce effect execution before it occurs.

Suggested solution

This would require breaking changes in the api.

// Before
const debounced = useDebounceFn(() => ..., 1000);

// After
const { debounced, stop } = useDebounceFn(() => ..., 1000);

// Call the debounced function (same as before)
debounced().then(...) // or await

// Stop the debounce if the execution of the function is planned but not yet started
stop() // This would eventually throw in the debounced() call depending on the already existing rejectOnCancel parameter.

Alternative

Current alternative is some custom code to track events in the timeline.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.