본문으로 건너뛰기

함수: createDebouncedSignal()

function createDebouncedSignal<TValue, TSelected>(
   value, 
   initialOptions, 
   selector?): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>];

정의 위치: solid-pacer/src/debouncer/createDebouncedSignal.ts:78

Solid의 createSignal과 디바운스 기능을 결합하여 디바운스 상태 값을 생성하는 Solid 훅입니다. 현재 디바운스된 값과 이를 업데이트하는 메서드를 모두 제공합니다.

상태 값은 마지막 업데이트 시도 후 지정된 대기 시간이 지난 뒤에만 업데이트됩니다. 대기 시간이 끝나기 전에 다시 업데이트를 시도하면 타이머가 초기화되어 다시 대기하기 시작합니다. 검색 입력 값이나 창 크기처럼 빈번하지만 디바운스해야 하는 상태 업데이트를 처리할 때 유용합니다.

훅은 다음 요소를 담은 튜플을 반환합니다.

  • 현재 디바운스 값 접근자
  • 디바운스된 값을 업데이트하는 함수
  • 추가 제어 메서드와 상태 시그널을 제공하는 디바운서 인스턴스

상태 관리와 셀렉터​

훅은 내부 디바운서 인스턴스를 통해 반응형 상태 관리에 TanStack Store를 사용합니다. selector 매개변수로 어떤 디바운서 상태 변경이 반응형 업데이트를 트리거할지 지정할 수 있으며, 관련 없는 상태가 변경될 때 불필요한 구독을 방지하여 성능을 최적화합니다.

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

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

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

타입 매개변수​

TValue​

TValue

TSelected​

TSelected = { }

매개변수​

value​

TValue

initialOptions​

SolidDebouncerOptions&lt;Setter&lt;TValue>, TSelected>

selector?​

(state) => TSelected

반환값​

[Accessor&lt;TValue>, Setter&lt;TValue>, SolidDebouncer&lt;Setter&lt;TValue>, TSelected>]

예시​

// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
  wait: 500 // Wait 500ms after last keystroke
});

// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
  '',
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to reactive updates when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
  '',
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Update value - will be debounced
const handleChange = (e) => {
  setSearchTerm(e.target.value);
};

// Access debouncer state via signals
console.log('Executions:', debouncer.state().executionCount);
console.log('Is pending:', debouncer.state().isPending);

// In onExecute callback, use get* methods
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
  wait: 500,
  onExecute: (debouncer) => {
    console.log('Total executions:', debouncer.getExecutionCount());
  }
});