import { useCallback , useEffect , useMemo , useRef } from 'react' ; export type RafLoopReturns = [ ( ) => void , ( ) => void , ( ) => boolean ] ; export default function useRafLoop ( callback , initiallyActive = true ) { const raf = useRef < number | null > ( null ) ; const rafActivity = useRef < boolean > ( false ) ; const rafCallback = useRef ( callback ) ; rafCallback . current = callback ; const step = useCallback ( ( time ) => { if ( rafActivity . current ) { rafCallback . current ( time ) ; raf . current = requestAnimationFrame ( step ) ; } } , [ ] ) ; const result = useMemo ( ( ) => [ ( ) => { if ( rafActivity . current ) { rafActivity . current = false ; raf . current && cancelAnimationFrame ( raf . current ) ; } } , ( ) => { if ( ! rafActivity . current ) { rafActivity . current = true ; raf . current = requestAnimationFrame ( step ) ; } } , ( ) : boolean => rafActivity . current , ] as RafLoopReturns , [ ] ) ; useEffect ( ( ) => { if ( initiallyActive ) { result [ 1 ] ( ) ; } return result [ 0 ] ; } , [ ] ) ; return result ; }