useDebouncedState

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

Code

🔗 실제 구현 코드 확인

Interface

typescript

/**
 * @interface DebounceParameters
 * @template T - 콜백 함수 타입입니다.
 * @param {DebounceParameters[0]} callback - 디바운스할 콜백 함수입니다.
 * @param {DebounceParameters[1]} wait - 지연시킬 시간(밀리초)입니다.
 * @param {DebounceParameters[2]} options - 디바운스 동작과 관련된 옵션 객체입니다.
 * @param {AbortSignal} options.signal - 디바운스된 함수를 취소하기 위한 선택적 AbortSignal입니다.
 * @param {number} options.maxWait - 최대 대기 시간(밀리초)입니다.
 * @param {boolean} options.leading - 첫 번째 호출을 실행할지 여부입니다.
 * @param {boolean} options.trailing - 마지막 호출을 실행할지 여부입니다.
 */
type DebounceParameters = Parameters<typeof useDebounce>;

/**
 * @interface DebounceReturnType
 * @param {() => void} cancel - 디바운스된 함수의 대기 중인 실행을 취소합니다.
 * @param {() => void} flush - 대기 중인 실행이 있는 경우 디바운스된 함수를 즉시 실행합니다.
 */
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>>>];

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

디바운싱 상태: