---
title: "Core — useDebounce"
canonical: https://sky-ui.cf.sky.com/core/hooks/use-debounce
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Core — useDebounce

```js
import { useDebounce } from '@sky-uk/ui-core';
```

The `useDebounce` hook can be used to return a value only when a repeated action has been delayed for greater than a given time delay. Debounce is most suitably used for control events such as typing or button clicks.

```tsx
() => {
  const Example = () => {
    const [value, setValue] = React.useState('');
    const debouncedValue = useDebounce(value);

    const handleChange = e => setValue(e.target.value);

    return (
      <Flex $flexDirection="column">
        <TextInput value={value} $marginBottom={4} onChange={handleChange} />
        <div>debouncedValue: {debouncedValue}</div>
      </Flex>
    );
  }

  return <Example />;
}
```

---

## Options

#### delay

The `delay` option can be set in `ms`. This option is defaulted to `500ms`.

```tsx
() => {
  const Example = () => {
    const [value, setValue] = React.useState('');
    const debouncedValue = useDebounce(value, { delay: 1000 });

    const handleChange = e => setValue(e.target.value);

    return (
      <Flex $flexDirection="column">
        <TextInput value={value} $marginBottom={4} onChange={handleChange} />
        <div>debouncedValue: {debouncedValue}</div>
      </Flex>
    );
  }

  return <Example />;
}
```