Funktion: useThrottler()

function useThrottler<TFn, TSelected>(
   fn, 
   options, 
selector): ReactThrottler<TFn, TSelected>

function useThrottler<TFn, TSelected>(
   fn, 
   options, 
selector): ReactThrottler<TFn, TSelected>

Definiert in: react-pacer/src/throttler/useThrottler.ts:107

Ein Low-Level-React-Hook, der eine Throttler-Instanz erstellt, die begrenzt, wie oft die bereitgestellte Funktion ausgeführt werden kann.

Dieser Hook ist flexibel und zustandsverwaltungsagnostisch konzipiert – er gibt einfach eine Throttler-Instanz zurück, die Sie mit jeder Zustandsverwaltungslösung (useState, Redux, Zustand, Jotai usw.) integrieren können. Für einen einfacheren und höherwertigen Hook, der direkt mit Reacts useState integriert, siehe useThrottledState.

Drosselung stellt sicher, dass eine Funktion höchstens einmal innerhalb eines bestimmten Zeitfensters ausgeführt wird, unabhängig davon, wie oft sie aufgerufen wird. Dies ist nützlich für die Ratenbegrenzung teurer Operationen oder UI-Aktualisierungen.

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

executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
lastExecutionTime: Zeitstempel der letzten Funktionsausführung in Millisekunden
nextExecutionTime: Zeitstempel, wann die nächste Ausführung erfolgen kann, in Millisekunden
isPending: Ob der Throttler auf den Timeout wartet, um die Ausführung auszulösen
status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending')

// Default behavior - no reactive state subscriptions
const [value, setValue] = useState(0);
const throttler = useThrottler(setValue, { wait: 1000 });

// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [value, setValue] = useState(0);
const throttler = useThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({ executionCount: state.executionCount })
);

// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue] = useState(0);
const throttler = useThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({
    isPending: state.isPending,
    status: state.status
  })
);

// Opt-in to re-render when timing information changes (optimized for timing displays)
const [value, setValue] = useState(0);
const throttler = useThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({
    lastExecutionTime: state.lastExecutionTime,
    nextExecutionTime: state.nextExecutionTime
  })
);

// With any state manager
const throttler = useThrottler(
  (value) => stateManager.setState(value),
  {
    wait: 2000,
    leading: true,   // Execute immediately on first call
    trailing: false  // Skip trailing edge updates
  }
);

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

// Default behavior - no reactive state subscriptions
const [value, setValue] = useState(0);
const throttler = useThrottler(setValue, { wait: 1000 });

// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [value, setValue] = useState(0);
const throttler = useThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({ executionCount: state.executionCount })
);

// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue] = useState(0);
const throttler = useThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({
    isPending: state.isPending,
    status: state.status
  })
);

// Opt-in to re-render when timing information changes (optimized for timing displays)
const [value, setValue] = useState(0);
const throttler = useThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({
    lastExecutionTime: state.lastExecutionTime,
    nextExecutionTime: state.nextExecutionTime
  })
);

// With any state manager
const throttler = useThrottler(
  (value) => stateManager.setState(value),
  {
    wait: 2000,
    leading: true,   // Execute immediately on first call
    trailing: false  // Skip trailing edge updates
  }
);

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

useThrottler

Funktion: useThrottler()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

optionen

selector

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren