use-debounced-state

Debounce value changes with minimal renders
Import

Usage

use-debounced-state hook debounces value changes. This can be useful in case you want to perform a heavy operation based on react state, for example, send search request. Unlike use-debounced-value it is designed to work with uncontrolled components.

Debounced value: [empty string]
import { useDebouncedState } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';
function Demo() {
const [value, setValue] = useDebouncedState('', 200);
return (
<>
<TextInput
label="Enter value to see debounce effect"
defaultValue={value}
style={{ flex: 1 }}
onChange={(event) => setValue(event.currentTarget.value)}
/>
<Text>Debounced value: {value}</Text>
</>
);
}

Differences to use-debounce-value

  • You do not have direct access to the non-debounced value.
  • It is used for uncontrolled inputs (defaultValue prop instead of value), e.g. does not render with every state change like a character typed in an input.
  • It does not work with custom state providers or props, and it uses useState internally.

Leading update

You can immediately update value with first call with { leading: true } options:

Debounced value: [empty string]
import { useDebouncedState } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';
function Demo() {
const [value, setValue] = useDebouncedState('', 200, { leading: true });
return (
<>
<TextInput
label="Enter value to see debounce effect"
defaultValue={value}
style={{ flex: 1 }}
onChange={(event) => setValue(event.currentTarget.value)}
/>
<Text>Debounced value: {value}</Text>
</>
);
}

Definition

function useDebouncedState<T = any>(
defaultValue: T,
wait: number,
options?: {
leading: boolean;
}
): readonly [T, (newValue: T) => void];