use-debounced-state

Debounces value changes

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

interface UseDebouncedStateOptions {
  leading?: boolean;
}

type UseDebouncedStateReturnValue<T> = [T, (newValue: SetStateAction<T>) => void];

function useDebouncedState<T = any>(
  defaultValue: T,
  wait: number,
  options?: UseDebouncedStateOptions,
): UseDebouncedStateReturnValue<T>

Exported types

UseDebouncedStateOptions and UseDebouncedStateReturnValue types are exported from @mantine/hooks package, you can import them in your application:

import type { UseDebouncedStateOptions, UseDebouncedStateReturnValue } from '@mantine/hooks';