useDebouncedInputValue

input value를 관리하고, 디바운싱(debouncing)을 적용하는 커스텀 React 훅입니다

현재 입력 값과 디바운싱된 값을 제공하며, 값을 업데이트하고 리셋할 수 있는 함수도 함께 제공합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type DebounceParameters = Parameters<typeof debounce>;

typescript

function useDebouncedInputValue(
  wait: DebounceParameters[1],
  options?: DebounceParameters[2]
): {
  value: string;
  debouncedValue: string;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
  onReset: () => void;
};

Usage

typescript

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

const Example = () => {
  const { value, debouncedValue, onChange, onReset } = useDebouncedInputValue(500);

  return (
    <div>
      <p>현재 입력 값: {value}</p>
      <p>디바운싱 입력 값: {debouncedValue}</p>
      <div>
        <input type='text' onChange={onChange} value={value} />
      </div>
      <div>
        <button onClick={onReset}>Reset 버튼</button>
      </div>
    </div>
  );
};

Example

현재 입력 값:

디바운싱 입력 값: