Verwenden von Debounce- und Throttle-Techniken in React

Um zu verhindern, dass eine Funktion in React zu häufig aufgerufen wird, etwa während der Änderung der Fenstergröße, können wir die Techniken Debounce und Throttle verwenden. Diese Methoden sind besonders nützlich, wenn wir bestimmte Funktionen aufgrund von ständigen Benutzereingaben oder -aktionen auslösen, wie Scrollen, Ändern der Bildschirmgröße oder längeres Tippen auf einer Tastatur.

Was ist Debouncing?

Debouncing ist eine Programmierpraxis, bei der die Ausführung einer Funktion verzögert wird, bis nach einer bestimmten Zeitspanne keine neuen Aufrufe erfolgen. Beispielsweise könnte bei Änderungen der Fenstergröße eine Funktion erst aufgerufen werden, wenn der Benutzer aufhört, die Größe zu ändern, anstatt bei jeder kleinen Änderung.

Ein einfacher Debounce-Hook in React könnte so aussehen:

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay] 
  );

  return debouncedValue;
}

Was ist Throttling?

Throttling ist ähnlich wie Debouncing, aber anstatt die Ausführung vollständig zu verzögern, begrenzt Throttling die Ausführungsrate auf einen bestimmten Abstand. Beispielsweise könnte bei Änderungen der Fenstergröße eine Funktion nur alle 200 Millisekunden aufgerufen werden, unabhängig davon, wie häufig die Änderung tatsächlich auftritt.

Ein einfacher Throttle-Hook in React könnte so aussehen:

import { useRef, useEffect } from 'react';

function useThrottle(callback, limit) {
  const lastRan = useRef(Date.now() - limit);

  useEffect(
    () => {
      const handler = setTimeout(function() {
        if (Date.now() - lastRan.current >= limit) {
          callback();
          lastRan.current = Date.now();
        }
      }, limit - (Date.now() - lastRan.current));

      return () => {
        clearTimeout(handler);
      };
    },
    [callback, limit] 
  );
}

Diese Techniken könnten bei einigen spezifischen Anwendungsfällen in React zum Einsatz kommen und können helfen, die Leistung und Benutzererfahrung zu verbessern, indem sie verhindern, dass Funktionen zu häufig ausgeführt werden. Jedoch sind sie keine Universallösungen und es sollte immer berücksichtigt werden, welche Methode am passendsten ist, je nach Anwendungsfall.