How to Cancel DeBounce

To implement a debounce function in React with full cancelation capabilities, you can follow these steps using a custom useDebounce hook.

Creating the useDebounce Hook

Here is how you can create a useDebounce hook that includes cancelation and other useful features:

javascript
import { useCallback, useEffect, useRef } from ‘react’;

const debounce = (func, wait = 200) => {
let timeout;
function executedFunction(…args) {
const later = () => {
clearTimeout(timeout);
func(…args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
executedFunction.cancel = function() {
clearTimeout(timeout);
};
return executedFunction;
};

const useDebounce = (callback, delay = 1000, deps = []) => {
const debouncedCallback = useCallback(debounce(callback, delay), [delay, …deps]);
useEffect(() => {
return () => {
debouncedCallback.cancel();
};
}, [delay, …deps]);
return debouncedCallback;
};

export default useDebounce;

Using the useDebounce Hook

Here’s how you can use this hook in your React component:

javascript
import React, { useState, useEffect } from ‘react’;
import useDebounce from ‘./useDebounce’;

const MyComponent = () => {
const [value, setValue] = useState(”);
const [debouncedValue, setDebouncedValue] = useState(”);

const debouncedSave = useDebounce(() => {
setDebouncedValue(value);
}, 500, [value]);

const onChange = (e) => {
setValue(e.target.value);
debouncedSave();
};

useEffect(() => {
return () => {
debouncedSave.cancel();
};
}, [debouncedSave]);

return (

);
};

export default MyComponent;

Cancelation Instructions

To cancel the debounce cycle, you can follow these steps:

• When the component unmounts: The useEffect hook in the useDebounce function automatically cancels any pending debounce calls when the component unmounts.
  javascript
  useEffect(() => {
  return () => {
  debouncedCallback.cancel();
  };
  }, [delay, …deps]);

• Manually canceling the debounce: You can call the cancel method on the debounced function to cancel any pending calls.
  javascript
  <button onClick={debouncedSave.cancel}>Cancel Debounce cycle

• Immediately executing the pending callback: If you need to execute the callback immediately before it fires naturally, you can add a flush method to your debounced function, though this is not included in the basic example above. Here’s how you could extend it:
  javascript
  const debouncedCallback = useMemo(() => {
  const func = () => {
  ref.current?.();
  };
  const debounced = debounce(func, delay);
  debounced.flush = () => {
  if (debounced.timeout) {
  clearTimeout(debounced.timeout);
  func();
  }
  };
  return debounced;
  }, []);

By following these steps, you ensure that your debounce function is properly managed, including cancelation of pending calls when necessary.