본문으로 건너뛰기

함수: useAsyncDebouncedCallback()

function useAsyncDebouncedCallback<TFn>(fn, options): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;

정의 위치: preact-pacer/src/async-debouncer/useAsyncDebouncedCallback.ts:46

비동기 콜백 함수의 디바운스된 버전을 생성하는 Preact 훅입니다. 이 훅은 useAsyncDebouncer 훅을 간편하게 래핑하며, Preact 컴포넌트에서 사용할 수 있는 안정적인 디바운스 비동기 함수 참조를 제공합니다.

디바운스된 비동기 함수는 마지막 호출 후 지정된 대기 시간이 경과해야 실행됩니다. 대기 시간이 끝나기 전에 다시 호출하면 타이머가 초기화되고 다시 대기하기 시작합니다. 반환된 함수는 항상 프로미스를 반환합니다. 실행을 트리거한 호출은 해당 실행 결과로 이행되거나 거부됩니다. 대체된 호출은 가장 최근 결과(아직 아무것도 실행되지 않았다면 undefined일 수 있음)로 이행되며, 디바운서가 비활성화된 동안의 호출은 undefined로 이행됩니다.

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

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

  • 수동 취소
  • 실행/오류 상태 접근
  • 사용자 지정 useCallback 의존성

useAsyncDebouncer 훅 사용을 고려합니다.

타입 매개변수​

TFn​

TFn extends AnyAsyncFunction

매개변수​

fn​

TFn

options​

PreactAsyncDebouncerOptions&lt;TFn, { }>

반환값​

(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;

매개변수​

args​

...Parameters&lt;TFn>

반환값​

Promise&lt;Awaited&lt;ReturnType&lt;TFn>> | undefined>

예시​

// Debounce an async search handler
const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
  const results = await fetchSearchResults(query);
  return results;
}, {
  wait: 500 // Wait 500ms between executions
});

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