Use Debounced State

import { UseDebouncedStateDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useDebouncedState);

Usage

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

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), for example, it 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 the value with the first call using { leading: true } options:

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

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

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