Function useDebouncedState

useDebouncedState<T>(
ms: number,
initialValue: T | (() => T),
): [value: T, debouncedValue: T, setValue: Dispatch<SetStateAction<T>>]
Returns stateful values and a function to update them. When you call setState, value is assigned synchronously and the component re-renders. After ms, debouncedValue is synchronized with value, and the component re-renders again.
Type Parameters
- T
  A stateful value.
Parameters
- ms: number
  A delay after which debouncedValue is synchronized with value.
- initialValue: T | (() => T)
  An initial value or a callback that returns the initial state.
Returns [value: T, debouncedValue: T, setValue: Dispatch<SetStateAction<T>>]
Example
```
const [value, debouncedValue, setValue] = useDebouncedState(500, 'hello');

useEffect(() => {
  fetch('https://example.com/' + debouncedValue);
}, [debouncedValue]);

<input
  type="text"
  value={value}
  onChange={event => setValue(event.target.value)}
/>
```
useDebouncedState<T = undefined>(
    ms: number,
): [
    value: T,
    debouncedValue: T,
    setValue: Dispatch<SetStateAction<T | undefined>>,
]
Returns stateful values and a function to update them. When you call setState, value is assigned synchronously and the component re-renders. After ms, debouncedValue is synchronized with value, and the component re-renders again.
Type Parameters
- T = undefined
  A stateful value.
Parameters
- ms: number
  A delay after which debouncedValue is synchronized with value.
Returns [value: T, debouncedValue: T, setValue: Dispatch<SetStateAction<T | undefined>>]
Example
```
const [value, debouncedValue, setValue] = useDebouncedState(500);

useEffect(() => {
  fetch('https://example.com/' + debouncedValue);
}, [debouncedValue]);

<input
  type="text"
  value={value}
  onChange={event => setValue(event.target.value)}
/>
```

Function useDebouncedState

Type Parameters

Parameters

Returns [value: T, debouncedValue: T, setValue: Dispatch<SetStateAction<T>>]

Example

Type Parameters

Parameters

Returns [value: T, debouncedValue: T, setValue: Dispatch<SetStateAction<T | undefined>>]

Example

Settings