Funktion: useThrottledState()

function useThrottledState<TValue, TSelected>(
   value, 
   options, 
   selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]

function useThrottledState<TValue, TSelected>(
   value, 
   options, 
   selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]

Definiert in: react-pacer/src/throttler/useThrottledState.ts:93

Ein React-Hook, der einen gedrosselten Zustands wert erzeugt, der sich höchstens einmal innerhalb eines bestimmten Zeitfensters aktualisiert. Dieser Hook kombiniert Reacts useState mit Drosselungsfunktionalität, um kontrollierte Zustandsaktualisierungen bereitzustellen.

Drosselung stellt sicher, dass Zustandsaktualisierungen mit einer kontrollierten Rate erfolgen, unabhängig davon, wie oft der Setter aufgerufen wird. Dies ist nützlich, um teure Neu-Renderings oder Operationen, die von sich schnell änderndem Zustand abhängen, ratenbegrenzt durchzuführen.

Der Hook gibt ein Tupel zurück, das enthält

Der gedrosselte Zustands wert
Eine gedrosselte Setter-Funktion, die die konfigurierte Wartezeit berücksichtigt
Die Throttler-Instanz für zusätzliche Kontrolle

Für direktere Kontrolle über die Drosselung ohne Zustandsverwaltung sollten Sie stattdessen den Low-Level-Hook useThrottler in Betracht ziehen.

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktive Zustandsverwaltung über die zugrunde liegende Throttler-Instanz. Der Parameter selector ermöglicht es Ihnen, anzugeben, welche Throttler-Zustandsänderungen ein erneutes Rendern auslösen, wodurch die Leistung optimiert wird, indem unnötige Neu-Renderings bei irrelevanten Zustandsänderungen verhindert werden.

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 Throttler-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, throttler] = useThrottledState(0, { wait: 1000 });

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

// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue, throttler] = useThrottledState(
  0,
  { 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, throttler] = useThrottledState(
  0,
  { wait: 1000 },
  (state) => ({
    lastExecutionTime: state.lastExecutionTime,
    nextExecutionTime: state.nextExecutionTime
  })
);

// With custom leading/trailing behavior
const [value, setValue] = useThrottledState(0, {
  wait: 1000,
  leading: true,   // Update immediately on first change
  trailing: false  // Skip trailing edge updates
});

// Access throttler methods if needed
const handleReset = () => {
  setValue(0);
  throttler.cancel(); // Cancel any pending updates
};

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

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

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

// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [value, setValue, throttler] = useThrottledState(
  0,
  { 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, throttler] = useThrottledState(
  0,
  { wait: 1000 },
  (state) => ({
    lastExecutionTime: state.lastExecutionTime,
    nextExecutionTime: state.nextExecutionTime
  })
);

// With custom leading/trailing behavior
const [value, setValue] = useThrottledState(0, {
  wait: 1000,
  leading: true,   // Update immediately on first change
  trailing: false  // Skip trailing edge updates
});

// Access throttler methods if needed
const handleReset = () => {
  setValue(0);
  throttler.cancel(); // Cancel any pending updates
};

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

useThrottledState

Funktion: useThrottledState()

Zustandsverwaltung und Selektor

Typparameter

Parameter

value

optionen

selector?

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren