use-throttled-value

Throttles value changes

Source

Docs

PackageIcon

Usage

The useThrottledValue hook accepts a value and a wait time in milliseconds. It returns a throttled value that cannot change more than once every wait milliseconds.

Throttled value: –

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

function Demo() {
  const [value, setValue] = useState('');
  const throttledValue = useThrottledValue(value, 1000);

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

Definition

function useThrottledValue<T>(value: T, wait: number): T;

use-throttled-state

use-toggle