useDebouncedState

A debounced version of useState.

Code

🔗 View source code

Interface

typescript

type DebounceParameters = Parameters<typeof useDebounce>;

type DebounceReturnType<T extends (...args: any) => any> = ReturnType<
  typeof useDebounce<T>
>;

typescript

function useDebouncedState<T>(
  initialState: T,
  wait: DebounceParameters[1],
  options?: DebounceParameters[2]
): [T, DebounceReturnType<Dispatch<React.SetStateAction<T>>>];

Parameters

Name	Type	Description
initialState	T	Initial state value
wait	number	Debounce delay time in milliseconds
options	{ maxWait?: number; leading?: boolean; trailing?: boolean; signal?: AbortSignal }	Debounce behavior options

Usage

typescript

import { useState } from 'react';
import { useDebouncedState } from '@modern-kit/react';

const Example = () => {
  const [debouncedState, setDebouncedState] = useDebouncedState<string>("", 500);

  return (
    <div>
      <p>Debounced state: {debouncedState}</p>
      <div>
        <input type='text' onChange={(e) => setDebouncedState(e.target.value)} />
      </div>
    </div>
  );
};

Example

Debounced state: