useDebouncedState

useState의 디바운스 버전의 훅입니다.

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	초기 상태 값
wait	number	상태 업데이트 지연 시간(밀리초)
options	{ maxWait?: number; leading?: boolean; trailing?: boolean; signal?: AbortSignal }	디바운스 동작 옵션

Usage

typescript

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

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

  return (
    <div>
      <p>디바운싱 상태: {debouncedState}</p>
      <div>
        <input type='text' onChange={(e) => setDebouncedState(e.target.value)} />
      </div>
    </div>
  );
};

Example

디바운싱 상태: