use-throttled-state

Throttles state changes

Source

Docs

PackageIcon

Usage

The useThrottledState hook works similarly to useState but throttles state updates. The setThrottledState handler in the example below will be called at most once every 1000ms.

Throttled value: –

import { Text, TextInput } from '@mantine/core';
import { useThrottledState } from '@mantine/hooks';

function Demo() {
  const [throttledValue, setThrottledValue] = useThrottledState('', 1000);

  return (
    <>
      <TextInput
        placeholder="Search"
        onChange={(event) => setThrottledValue(event.currentTarget.value)}
      />
      <Text>Throttled value: {throttledValue || '–'}</Text>
    </>
  );
}

Definition

function useThrottledState<T = any>(
  defaultValue: T,
  wait: number
): readonly [T, (newValue: React.SetStateAction<T>) => void];

use-throttled-callback

use-throttled-value