React - verzögerter Rückruf - Zustand zurücksetzen

In diesem kurzen Artikel wird gezeigt, wie man eine Rückruf-Funktion (callback) schreiben kann, die erst nach Ablauf einer bestimmten Zeit aufgerufen wird.

Die Hauptidee des folgenden Codes ist es, die Anzahl der Aufrufe von callback-Funktionen zu reduzieren, indem der vorherige Aufruf abgebrochen wird, wenn ein neues handleClick-Ereignis auftritt. 

Schnelle Lösung:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const useDelayedCallback = (delay = 100) => {
    const ref = React.useRef();
    React.useEffect(() => {
        // Bereinigung eines ungerufenen Anrufs
        return () => {
          	if (ref.current) clearTimeout(ref.current);
        };
    }, []);
    return (callback) => {
        if (ref.current) clearTimeout(ref.current);
        ref.current = setTimeout(callback, delay);
    };
};

// Verwendungsbeispiel

const App = () => {
    const delayCallback = useDelayedCallback(500); // max. 1 Anruf pro 500ms
    const handleClick = () => {
      	delayCallback(() => console.log('Die Schaltfläche wurde angeklickt!'));
    };
    return (
      <button onClick={handleClick}>Mehrmals anklicken!</button>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );

Wenn der Klickvorgang abgeschlossen ist, erscheint auf dem Bildschirm eine Warnmeldung mit dem Titel Die Schaltfläche wurde angeklickt!. Wenn man in einem kurzen Zeitraum mehrmals auf die Schaltfläche klickt, wird nur ein Klick-Ereignis auftreten - die Anzahl der Aufrufe wird reduziert.