diff --git a/src/useRafLoop.ts b/src/useRafLoop.ts index 23a0807478..81fa7471d6 100644 --- a/src/useRafLoop.ts +++ b/src/useRafLoop.ts @@ -13,8 +13,8 @@ export default function useRafLoop( const step = useCallback((time: number) => { if (rafActivity.current) { - rafCallback.current(time); raf.current = requestAnimationFrame(step); + rafCallback.current(time); } }, []); diff --git a/tests/useRafLoop.test.tsx b/tests/useRafLoop.test.tsx index 3830f88ac3..1199de53db 100644 --- a/tests/useRafLoop.test.tsx +++ b/tests/useRafLoop.test.tsx @@ -93,6 +93,40 @@ describe('useRafLoop', () => { }); describe('returned methods', () => { + it('should keep one loop when restarting from the callback', () => { + const spy = jest.fn(() => { + if (spy.mock.calls.length === 1) { + hook.result.current[0](); + hook.result.current[1](); + } + }); + const hook = renderHook(() => useRafLoop(spy)); + + requestAnimationFrame.step(); + expect(spy).toBeCalledTimes(1); + requestAnimationFrame.step(3); + expect(spy).toBeCalledTimes(4); + + hook.result.current[0](); + requestAnimationFrame.step(); + expect(spy).toBeCalledTimes(4); + }); + + it('should cancel the pending frame when stopped from the callback', () => { + const spy = jest.fn(() => { + if (spy.mock.calls.length === 1) { + hook.result.current[0](); + } + }); + const hook = renderHook(() => useRafLoop(spy)); + + requestAnimationFrame.step(); + expect(hook.result.current[2]()).toBe(false); + hook.result.current[1](); + requestAnimationFrame.step(3); + expect(spy).toBeCalledTimes(4); + }); + it('stop method should stop the loop', () => { const spy = jest.fn(); const hook = renderHook(() => useRafLoop(spy), { initialProps: false });