useDebounce

View on GitHub

import { useDebounce } from '@sky-uk/ui-core';

The useDebounce hook can be used to return a value only when a repeated action has been delayed for greater than a given time delay. Debounce is most suitably used for control events such as typing or button clicks.

Select background colour

() => {
  const Example = () => {
    const [value, setValue] = React.useState('');
    const debouncedValue = useDebounce(value);

    const handleChange = e => setValue(e.target.value);

    return (
      <Flex $flexDirection="column">
        <TextInput value={value} $marginBottom={4} onChange={handleChange} />
        <div>debouncedValue: {debouncedValue}</div>
      </Flex>
    );
  }

  return <Example />;
}

() => {
  const Example = () => {
    const [value, setValue] = React.useState('');
    const debouncedValue = useDebounce(value);

    const handleChange = e => setValue(e.target.value);

    return (
      <Flex $flexDirection="column">
        <TextInput value={value} $marginBottom={4} onChange={handleChange} />
        <div>debouncedValue: {debouncedValue}</div>
      </Flex>
    );
  }

  return <Example />;
}

Options

delay

The delay option can be set in ms. This option is defaulted to 500ms.

Select background colour

() => {
  const Example = () => {
    const [value, setValue] = React.useState('');
    const debouncedValue = useDebounce(value, { delay: 1000 });

    const handleChange = e => setValue(e.target.value);

    return (
      <Flex $flexDirection="column">
        <TextInput value={value} $marginBottom={4} onChange={handleChange} />
        <div>debouncedValue: {debouncedValue}</div>
      </Flex>
    );
  }

  return <Example />;
}

() => {
  const Example = () => {
    const [value, setValue] = React.useState('');
    const debouncedValue = useDebounce(value, { delay: 1000 });

    const handleChange = e => setValue(e.target.value);

    return (
      <Flex $flexDirection="column">
        <TextInput value={value} $marginBottom={4} onChange={handleChange} />
        <div>debouncedValue: {debouncedValue}</div>
      </Flex>
    );
  }

  return <Example />;
}