@restart/hooks
Version:
A set of utility and general-purpose React hooks.
26 lines • 913 B
JavaScript
import { useEffect } from 'react';
import useCommittedRef from './useCommittedRef.js';
function useRafInterval(fn, ms, paused = false) {
let handle;
let start = new Date().getTime();
const 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.
const pausedRef = useCommittedRef(paused);
function loop() {
const current = new Date().getTime();
const delta = current - start;
if (pausedRef.current) return;
if (delta >= ms && fnRef.current) {
fnRef.current();
start = new Date().getTime();
}
cancelAnimationFrame(handle);
handle = requestAnimationFrame(loop);
}
useEffect(() => {
handle = requestAnimationFrame(loop);
return () => cancelAnimationFrame(handle);
}, []);
}
export default useRafInterval;