1---
2category: Reactivity
3alias: useDebounce, debouncedRef
4---
5 
6# refDebounced
7 
8Debounce execution of a ref value.
9 
10## Usage
11 
12```ts {5}
13import { refDebounced } from '@vueuse/core'
14import { shallowRef } from 'vue'
15 
16const input = shallowRef('foo')
17const debounced = refDebounced(input, 1000)
18 
19input.value = 'bar'
20console.log(debounced.value) // 'foo'
21 
22await sleep(1100)
23 
24console.log(debounced.value) // 'bar'
25// ---cut-after---
26function sleep(ms: number) {
27  return new Promise(resolve => setTimeout(resolve, ms))
28}
29```
30 
31An example with object ref.
32 
33```js
34import { refDebounced } from '@vueuse/core'
35import { shallowRef } from 'vue'
36 
37const data = shallowRef({
38  name: 'foo',
39  age: 18,
40})
41const debounced = refDebounced(data, 1000)
42 
43function update() {
44  data.value = {
45    ...data.value,
46    name: 'bar',
47  }
48}
49 
50console.log(debounced.value) // { name: 'foo', age: 18 }
51update()
52await sleep(1100)
53 
54console.log(debounced.value) // { name: 'bar', age: 18 }
55```
56 
57You can also pass an optional 3rd parameter including maxWait option. See `useDebounceFn` for details.
58 
59## Recommended Reading
60 
61- [**Debounce vs Throttle**: Definitive Visual Guide](https://kettanaito.com/blog/debounce-vs-throttle)
62 
63## Type Declarations
64 
65```ts
66export type RefDebouncedReturn<T = any> = Readonly<Ref<T>>
67/**
68 * Debounce updates of a ref.
69 *
70 * @return A new debounced ref.
71 */
72export declare function refDebounced<T>(
73  value: Ref<T>,
74  ms?: MaybeRefOrGetter<number>,
75  options?: DebounceFilterOptions,
76): RefDebouncedReturn<T>
77/** @deprecated use `refDebounced` instead */
78export declare const debouncedRef: typeof refDebounced
79/** @deprecated use `refDebounced` instead */
80export declare const useDebounce: typeof refDebounced
81```
82