---
title: "useDebounceFn – Effect Hook Usage & Examples"
description: "React hooks that [debounce](https://lodash.com/docs/4.17.15#debounce) function."
canonical: https://reactuse.com/effect/usedebouncefn/
---

# useDebounceFn

React hooks that [debounce](https://lodash.com/docs/4.17.15#debounce) function

`useDebounceFn` wraps a function with debounce behavior powered by `lodash.debounce`. It returns an object with `run`, `cancel`, and `flush` methods, giving you full control over the debounced execution. The debounced function delays invoking your callback until after the specified wait time has elapsed since the last call.

### When to Use

- Debouncing search input so API requests are only sent after the user stops typing
- Limiting the rate of expensive computations triggered by rapidly changing values (e.g., window resize calculations)
- Delaying form validation until the user pauses input

### Notes

- **Lodash options**: The third parameter accepts `lodash.debounce` options such as `leading`, `trailing`, and `maxWait` for fine-tuned control.
- **Cleanup**: Call `cancel()` to discard any pending debounced invocation, or `flush()` to execute it immediately.
- See also `useThrottleFn` for rate-limiting that guarantees execution at regular intervals rather than waiting for inactivity.

## Usage

```tsx live
function Demo() {
  const [value, setValue] = useState(0);
  const { run } = useDebounceFn(() => {
    setValue(value + 1);
  }, 500);

  return (
    <div>
      <p style={{ marginTop: 16 }}> Clicked count: {value} </p>
      <button type="button" onClick={run}>
        Click fast!
      </button>
    </div>
  );
};

```

%%API%%