함수: createDebouncer()

function createDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): SolidDebouncer<TFn, TSelected>;

정의 위치: solid-pacer/src/debouncer/createDebouncer.ts:156

Debouncer 인스턴스를 생성하고 관리하는 Solid 훅입니다.

내장 상태 관리 없이 Debouncer의 기능에 직접 접근할 수 있는 하위 수준 훅입니다. 따라서 선호하는 어떤 상태 관리 솔루션 createSignal, Redux, Zustand 등 원하는 상태 관리 솔루션과 통합할 수 있습니다.

이 훅은 함수 호출 빈도를 제한하는 디바운스 기능을 제공하며, 최신 호출을 실행하기 전에 지정된 지연 시간만큼 기다립니다. 창 크기 조정, 스크롤 이벤트 또는 실시간 검색 입력처럼 빈번한 이벤트를 처리할 때 유용합니다.

디바운서는 마지막 호출 후 지정된 대기 시간이 지난 뒤에만 함수를 실행합니다. 대기 시간이 끝나기 전에 함수를 다시 호출하면 타이머가 초기화되어 다시 대기하기 시작합니다.

상태 관리와 셀렉터

훅은 반응형 상태 관리에 TanStack Store를 사용합니다. 다음 두 가지 방식으로 상태 변경을 구독할 수 있습니다. 구독 방식은 다음과 같습니다.

1. debouncer.Subscribe 컴포넌트 사용(컴포넌트 트리 구독에 권장)

Subscribe 컴포넌트를 사용하면 컴포넌트 트리 깊은 곳에서 상태 변경을 구독하면서도 훅에 셀렉터를 전달할 필요가 없습니다. 자식 컴포넌트에서 상태를 구독하려는 경우에 적합합니다.

2. selector 매개변수 사용(훅 수준 구독)

selector 매개변수로 반응형 업데이트를 트리거할 상태 변경을 지정할 수 있으며, 훅 수준에서 관련 없는 상태가 변경될 때 불필요한 업데이트를 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 반응형 상태를 추적하려면 셀렉터 함수를 제공하여 셀렉터 함수를 제공하거나 Subscribe 컴포넌트를 사용해 명시적으로 활성화해야 합니다. 이를 통해 불필요한 업데이트를 방지하고 컴포넌트가 상태 변경을 추적할 시점을 완전히 제어할 수 있습니다.

사용할 수 있는 상태 속성은 다음과 같습니다.

• canLeadingExecute: 디바운서가 선행 에지에서 실행될 수 있는지 여부
• executionCount: 완료된 함수 실행 횟수
• isPending: 디바운서가 타임아웃 후 실행되기를 기다리고 있는지 여부
• lastArgs: 가장 최근 maybeExecute 호출에 전달된 인수
• status: 현재 실행 상태('disabled' | 'idle' | 'pending')

언마운트 동작

기본적으로 소유 컴포넌트가 마운트 해제되면 대기 중인 실행을 취소합니다. onUnmount 옵션으로 이 동작을 사용자 지정할 수 있습니다. 예를 들어 대기 중인 작업을 대신 플러시하려면 다음과 같이 설정합니다.

const debouncer = createDebouncer(fn, {
  wait: 500,
  onUnmount: (d) => d.flush()
});

타입 매개변수

TFn

TFn extends AnyFunction

TSelected

TSelected = { }

매개변수

fn

TFn

options

SolidDebouncerOptions<TFn, TSelected>

selector

(state) => TSelected

반환값

SolidDebouncer<TFn, TSelected>

예시

// Default behavior - no reactive state subscriptions
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 }
);

// Opt-in to track isPending changes (optimized for loading states)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to track executionCount changes (optimized for tracking execution)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - track when any of these change
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    status: state.status
  })
);

// In an event handler
const handleChange = (e) => {
  debouncer.maybeExecute(e.target.value);
};

// Access the selected state (will be empty object {} unless selector provided)
const { isPending } = debouncer.state();