함수: createThrottler()

function createThrottler<TFn, TSelected>(
   fn, 
   options, 
selector): SolidThrottler<TFn, TSelected>;

정의 위치: solid-pacer/src/throttler/createThrottler.ts:159

제공된 함수의 실행 빈도를 제한하는 Throttler 인스턴스를 생성하는 저수준 Solid 훅입니다.

유연하고 상태 관리 방식에 구애받지 않도록 설계되었습니다. 스로틀러 인스턴스만 반환하므로 createSignal, Redux, Zustand, Jotai 등 원하는 상태 관리 솔루션과 통합할 수 있습니다. 더 간단한 고수준 훅으로 Solid의 createSignal과 직접 통합하려면 createThrottledSignal을 참고합니다.

스로틀은 호출 횟수와 관계없이 지정된 시간 윈도우 안에서 함수가 최대 한 번만 실행되도록 합니다. 비용이 큰 작업이나 UI 업데이트의 요청률을 제한할 때 유용합니다.

상태 관리와 셀렉터

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

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

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

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

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

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

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

• canLeadingExecute: 스로틀러가 선행 에지에서 실행될 수 있는지 여부
• canTrailingExecute: 스로틀러가 후행 에지에서 실행될 수 있는지 여부
• executionCount: 완료된 함수 실행 횟수
• isPending: 스로틀러가 타임아웃 후 실행되기를 기다리고 있는지 여부
• lastArgs: 가장 최근 maybeExecute 호출에 전달된 인수
• lastExecutionTime: 마지막 실행의 타임스탬프
• nextExecutionTime: 다음 실행이 허용되는 시점의 타임스탬프
• status: 현재 실행 상태('disabled' | 'idle' | 'pending')

언마운트 동작

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

const throttler = createThrottler(fn, {
  wait: 1000,
  onUnmount: (t) => t.flush()
});

타입 매개변수

TFn

TFn extends AnyFunction

TSelected

TSelected = { }

매개변수

fn

TFn

options

SolidThrottlerOptions<TFn, TSelected>

selector

(state) => TSelected

반환값

SolidThrottler<TFn, TSelected>

예시

// Default behavior - no reactive state subscriptions
const throttler = createThrottler(setValue, { wait: 1000 });

// Subscribe to state changes deep in component tree using Subscribe component
<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
  {(state) => (
    <div>{state().isPending ? 'Loading...' : 'Ready'}</div>
  )}
</throttler.Subscribe>

// Opt-in to track isPending changes at hook level (optimized for loading states)
const throttler = createThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to track executionCount changes (optimized for tracking execution)
const throttler = createThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - track when any of these change
const throttler = createThrottler(
  setValue,
  {
    wait: 2000,
    leading: true,   // Execute immediately on first call
    trailing: false  // Skip trailing edge updates
  },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    lastExecutionTime: state.lastExecutionTime,
    nextExecutionTime: state.nextExecutionTime
  })
);

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