Funktion: useAsyncDebouncer()

function useAsyncDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): ReactAsyncDebouncer<TFn, TSelected>

function useAsyncDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): ReactAsyncDebouncer<TFn, TSelected>

Definiert in: react-pacer/src/async-debouncer/useAsyncDebouncer.ts:149

Ein Low-Level-React-Hook, der eine AsyncDebouncer-Instanz erstellt, um die Ausführung einer asynchronen Funktion zu verzögern.

Dieser Hook ist flexibel und unabhängig von der Zustandsverwaltung konzipiert – er gibt einfach eine Debouncer-Instanz zurück, die Sie mit jeder Zustandsverwaltungs-Lösung (useState, Redux, Zustand, Jotai usw.) integrieren können.

Asynchrones Debouncing stellt sicher, dass eine asynchrone Funktion erst nach einer bestimmten Verzögerung seit ihrer letzten Ausführung ausgeführt wird. Jeder neue Aufruf setzt den Verzögerungs-Timer zurück. Dies ist nützlich für die Verarbeitung häufiger Ereignisse wie Fenstergrößenänderungen oder Eingabeänderungen, bei denen Sie den Handler erst ausführen möchten, nachdem die Ereignisse aufgehört haben.

Im Gegensatz zu Throttling, das die Ausführung in regelmäßigen Abständen zulässt, verhindert Debouncing jede Ausführung, bis die Funktion für den angegebenen Verzögerungszeitraum nicht mehr aufgerufen wird.

Im Gegensatz zum nicht-asynchronen Debouncer unterstützt diese asynchrone Version die Rückgabe von Werten aus der debounced-Funktion, was sie ideal für API-Aufrufe und andere asynchrone Operationen macht, bei denen Sie das Ergebnis des maybeExecute-Aufrufs anstelle des Setzens des Ergebnisses in einer Zustandsvariable innerhalb der debounced-Funktion wünschen.

Fehlerbehandlung

Wenn ein onError-Handler bereitgestellt wird, wird dieser mit dem Fehler und der Debouncer-Instanz aufgerufen.
Wenn throwOnError auf true gesetzt ist (Standardwert, wenn kein onError-Handler bereitgestellt wird), wird der Fehler ausgelöst.
Wenn throwOnError auf false gesetzt ist (Standardwert, wenn ein onError-Handler bereitgestellt wird), wird der Fehler "verschluckt".
Sowohl onError als auch throwOnError können zusammen verwendet werden – der Handler wird aufgerufen, bevor ein Fehler ausgelöst wird.
Der Fehlerzustand kann über die zugrundeliegende AsyncDebouncer-Instanz überprüft werden.

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
errorCount: Anzahl der Funktionsausführungen, die zu Fehlern geführt haben
isExecuting: Ob die debounced-Funktion gerade asynchron ausgeführt wird
isPending: Ob der Debouncer auf den Timeout wartet, um die Ausführung auszulösen
lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
lastResult: Das Ergebnis der letzten erfolgreichen Funktionsausführung
settleCount: Anzahl der abgeschlossenen Funktionsausführungen (Erfolg oder Fehler)
status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
successCount: Anzahl der Funktionsausführungen, die erfolgreich abgeschlossen wurden

// Default behavior - no reactive state subscriptions
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 }
);

// Opt-in to re-render when execution state changes (optimized for loading indicators)
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 },
  (state) => ({
    isExecuting: state.isExecuting,
    isPending: state.isPending
  })
);

// Opt-in to re-render when results are available (optimized for data display)
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 },
  (state) => ({
    lastResult: state.lastResult,
    successCount: state.successCount
  })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  {
    wait: 500,
    onError: (error) => console.error('Search failed:', error)
  },
  (state) => ({
    errorCount: state.errorCount,
    status: state.status
  })
);

// With state management
const [results, setResults] = useState([]);
const { maybeExecute, state } = useAsyncDebouncer(
  async (searchTerm) => {
    const data = await searchAPI(searchTerm);
    setResults(data);
  },
  {
    wait: 300,
    leading: true,   // Execute immediately on first call
    trailing: false, // Skip trailing edge updates
    onError: (error) => {
      console.error('API call failed:', error);
    }
  }
);

// Access the selected state (will be empty object {} unless selector provided)
const { isExecuting, lastResult } = state;

// Default behavior - no reactive state subscriptions
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 }
);

// Opt-in to re-render when execution state changes (optimized for loading indicators)
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 },
  (state) => ({
    isExecuting: state.isExecuting,
    isPending: state.isPending
  })
);

// Opt-in to re-render when results are available (optimized for data display)
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 },
  (state) => ({
    lastResult: state.lastResult,
    successCount: state.successCount
  })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const searchDebouncer = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  {
    wait: 500,
    onError: (error) => console.error('Search failed:', error)
  },
  (state) => ({
    errorCount: state.errorCount,
    status: state.status
  })
);

// With state management
const [results, setResults] = useState([]);
const { maybeExecute, state } = useAsyncDebouncer(
  async (searchTerm) => {
    const data = await searchAPI(searchTerm);
    setResults(data);
  },
  {
    wait: 300,
    leading: true,   // Execute immediately on first call
    trailing: false, // Skip trailing edge updates
    onError: (error) => {
      console.error('API call failed:', error);
    }
  }
);

// Access the selected state (will be empty object {} unless selector provided)
const { isExecuting, lastResult } = state;

useAsyncDebouncer

Funktion: useAsyncDebouncer()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

optionen

selector

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren