Funktion: useDebouncer()

function useDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): ReactDebouncer<TFn, TSelected>

function useDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): ReactDebouncer<TFn, TSelected>

Definiert in: react-pacer/src/debouncer/useDebouncer.ts:102

Ein React-Hook, der eine Debouncer-Instanz erstellt und verwaltet.

Dies ist ein Hook auf niedrigerer Ebene, der direkten Zugriff auf die Funktionalität des Debouncers bietet, ohne integriertes State-Management. Dadurch können Sie ihn mit jeder bevorzugten State-Management-Lösung (useState, Redux, Zustand usw.) integrieren.

Dieser Hook bietet eine Debouncing-Funktionalität, um zu begrenzen, wie oft eine Funktion aufgerufen werden kann, und wartet eine angegebene Verzögerung ab, bevor der neueste Aufruf ausgeführt wird. Dies ist nützlich für die Verarbeitung häufiger Ereignisse wie Fenstergrößenänderungen, Scroll-Ereignisse oder Echtzeit-Suchabfragen.

Der Debouncer führt die Funktion erst aus, nachdem die angegebene Wartezeit seit dem letzten Aufruf verstrichen ist. Wenn die Funktion vor Ablauf der Wartezeit erneut aufgerufen wird, wird der Timer zurückgesetzt und beginnt erneut zu warten.

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktives Zustandsmanagement. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Zustandsänderungen ein erneutes Rendern auslösen, wodurch die Leistung optimiert wird, indem unnötige erneute Renderings verhindert werden, wenn irrelevante Zustandsänderungen auftreten.

Standardmäßig erfolgen keine reaktiven Zustands-Subscriptions und Sie müssen das Zustands-Tracking durch Bereitstellen einer Selector-Funktion aktivieren. Dies verhindert unnötige Renderings und gibt Ihnen die volle Kontrolle darüber, wann Ihre Komponente aktualisiert wird. Nur wenn Sie einen Selector bereitstellen, wird die Komponente neu gerendert, wenn sich die ausgewählten Zustandswerte ändern.

Verfügbare Zustandseigenschaften

canLeadingExecute: Ob der Debouncer an der führenden Kante ausführen kann
executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
isPending: Ob der Debouncer auf den Timeout wartet, um die Ausführung auszulösen
lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending')

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

// Opt-in to re-render when isPending changes (optimized for loading states)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

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

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

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

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

// Opt-in to re-render when isPending changes (optimized for loading states)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

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

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

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

useDebouncer

Funktion: useDebouncer()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

optionen

selector

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren