PL
React - opóźnione wywołanie zwrotne - reset stanu
3 points
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:
xxxxxxxxxx1
// import React from 'react';2
// import ReactDOM from 'react-dom';3
4
const useDelayedCallback = (delay = 100) => {5
const ref = React.useRef();6
React.useEffect(() => {7
// czyszczenie niewywołanego wywołania8
return () => {9
if (ref.current) clearTimeout(ref.current);10
};11
}, []);12
return (callback) => {13
if (ref.current) clearTimeout(ref.current);14
ref.current = setTimeout(callback, delay);15
};16
};17
18
// Przykład użycia19
20
const App = () => {21
const delayCallback = useDelayedCallback(500); // max 1 wysołanie na 500ms22
const handleClick = () => {23
delayCallback(() => console.log('Kliknięto przycisk!'));24
};25
return (26
<button onClick={handleClick}>Kliknij kilka razy!</button>27
);28
};29
30
const root = document.querySelector('#root');31
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ń.