Back to Mantine

Use Throttled State

apps/mantine.dev/src/pages/hooks/use-throttled-state.mdx

9.1.1574 B
Original Source

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

export default Layout(MDX_DATA.useThrottledState);

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.

<Demo data={UseThrottledStateDemos.usage} />

Definition

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