mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-28 19:35:15 +00:00
58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
import { useEffect } from 'react';
|
|
import useCommittedRef from './useCommittedRef';
|
|
/**
|
|
* Creates a `setInterval` that is properly cleaned up when a component unmounted
|
|
*
|
|
* ```tsx
|
|
* function Timer() {
|
|
* const [timer, setTimer] = useState(0)
|
|
* useInterval(() => setTimer(i => i + 1), 1000)
|
|
*
|
|
* return <span>{timer} seconds past</span>
|
|
* }
|
|
* ```
|
|
*
|
|
* @param fn an function run on each interval
|
|
* @param ms The milliseconds duration of the interval
|
|
*/
|
|
|
|
function useInterval(fn, ms, paused, runImmediately) {
|
|
if (paused === void 0) {
|
|
paused = false;
|
|
}
|
|
|
|
if (runImmediately === void 0) {
|
|
runImmediately = false;
|
|
}
|
|
|
|
var handle;
|
|
var fnRef = useCommittedRef(fn); // this ref is necessary b/c useEffect will sometimes miss a paused toggle
|
|
// orphaning a setTimeout chain in the aether, so relying on it's refresh logic is not reliable.
|
|
|
|
var pausedRef = useCommittedRef(paused);
|
|
|
|
var tick = function tick() {
|
|
if (pausedRef.current) return;
|
|
fnRef.current();
|
|
schedule(); // eslint-disable-line no-use-before-define
|
|
};
|
|
|
|
var schedule = function schedule() {
|
|
clearTimeout(handle);
|
|
handle = setTimeout(tick, ms);
|
|
};
|
|
|
|
useEffect(function () {
|
|
if (runImmediately) {
|
|
tick();
|
|
} else {
|
|
schedule();
|
|
}
|
|
|
|
return function () {
|
|
return clearTimeout(handle);
|
|
};
|
|
}, [paused, runImmediately]);
|
|
}
|
|
|
|
export default useInterval; |