React - opóźnione wywołanie zwrotne - reset stanu

W tym krótkim artykule chcielibyśmy pokazać, jak napisać funkcję wywołania zwrotnego (callback), która jest wywoływana dopiero po upływie określonego czasu.

Głównym założeniem poniższego kodu jest zmniejszenie liczby wywołań funkcji callback poprzez anulowanie poprzedniego wywołania, gdy pojawi się nowe zdarzenie handleClick.

Szybkie rozwiązanie:

// ONLINE-RUNNER:browser;

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

const useDelayedCallback = (delay = 100) => {
    const ref = React.useRef();
    React.useEffect(() => {
        // czyszczenie niewywołanego wywołania
        return () => {
          	if (ref.current) clearTimeout(ref.current);
        };
    }, []);
    return (callback) => {
        if (ref.current) clearTimeout(ref.current);
        ref.current = setTimeout(callback, delay);
    };
};

// Przykład użycia

const App = () => {
    const delayCallback = useDelayedCallback(500); // max 1 wysołanie na 500ms
    const handleClick = () => {
      	delayCallback(() => console.log('Kliknięto przycisk!'));
    };
    return (
      <button onClick={handleClick}>Kliknij kilka razy!</button>
    );
};

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

Po zakończeniu operacji kliknięcia zobaczymy na ekranie  komunikat ostrzegawczy Kliknięto przycisk!. Gdy klikniemy w przycisk wielokrotnie w krótkim czasie, nastąpi tylko jedno zdarzenie kliknięcia - zmniejszyliśmy liczbę wywołań.