use-debounced-state

Debounces value changes

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}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Debounced value: {value}</Text>
    </>
  );
}

Differences from 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}
        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];