Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

use-throttled-state

Throttles state changes

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

Usage

useThrottledState works similar to useState but throttles the state updates. 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];

Previous

use-throttled-callback

Next

use-throttled-value

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people