함수: useDebouncedCallback()

function useDebouncedCallback<TFn>(fn, options): (...args) => void;

정의 위치: react-pacer/src/debouncer/useDebouncedCallback.ts:42

콜백 함수의 디바운스된 버전을 생성하는 React 훅입니다. 이 훅은 기본 debounce 함수를 래핑합니다. 이 함수는 @tanstack/pacer에서 내보내지만, 반응형 옵션과 안정적인 함수 참조를 활용하도록 React에 최적화되어 있습니다.

디바운스된 함수는 마지막 호출 후 지정된 대기 시간이 경과해야 실행됩니다. 대기 시간이 끝나기 전에 다시 호출하면 타이머가 초기화되고 다시 대기하기 시작합니다.

이 훅은 useDebouncer보다 간단한 API를 제공하므로 기본적인 디바운스 요구 사항에 적합합니다. 그러나 내부 Debouncer 인스턴스는 노출하지 않습니다.

다음과 같은 고급 기능이 필요하다면:

• 수동 취소
• 실행 횟수 접근
• 사용자 지정 useCallback 의존성

useDebouncer 훅 사용을 고려합니다.

타입 매개변수

TFn

TFn extends AnyFunction

매개변수

fn

TFn

options

ReactDebouncerOptions<TFn, { }>

반환값

(...args): void;

매개변수

args

...Parameters<TFn>

반환값

void

예시

// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
  fetchSearchResults(query);
}, {
  wait: 500 // Wait 500ms between executions
});

// Use in an input
<input
  type="search"
  onChange={(e) => handleSearch(e.target.value)}
/>