diff --git a/packages/@mantine/hooks/src/use-interval/use-interval.test.ts b/packages/@mantine/hooks/src/use-interval/use-interval.test.ts index cc42a0554da..df9dabf217b 100644 --- a/packages/@mantine/hooks/src/use-interval/use-interval.test.ts +++ b/packages/@mantine/hooks/src/use-interval/use-interval.test.ts @@ -138,4 +138,32 @@ describe('@mantine/hooks/use-interval', () => { advanceTimerToNextTick(); expect(callback).toHaveBeenCalledTimes(3); }); + + it('should change interval timing when interval parameter changes', () => { + const initialTimeout = defaultTimeout; + const newTimeout = 500; + + const { result, rerender } = renderHook(({ timeout }) => useInterval(callback, timeout), { + initialProps: { timeout: initialTimeout }, + }); + + act(() => { + result.current.start(); + }); + + expect(setInterval).toHaveBeenCalledWith(expect.any(Function), initialTimeout); + + jest.advanceTimersByTime(initialTimeout); + expect(callback).toHaveBeenCalledTimes(1); + + rerender({ timeout: newTimeout }); + + expect(setInterval).toHaveBeenCalledWith(expect.any(Function), newTimeout); + + jest.advanceTimersByTime(newTimeout); + expect(callback).toHaveBeenCalledTimes(2); + + jest.advanceTimersByTime(newTimeout); + expect(callback).toHaveBeenCalledTimes(3); + }); }); diff --git a/packages/@mantine/hooks/src/use-interval/use-interval.ts b/packages/@mantine/hooks/src/use-interval/use-interval.ts index 5533a371cbe..a21e17f6741 100644 --- a/packages/@mantine/hooks/src/use-interval/use-interval.ts +++ b/packages/@mantine/hooks/src/use-interval/use-interval.ts @@ -35,7 +35,7 @@ export function useInterval( } return true; }); - }, []); + }, [interval]); const stop = useCallback(() => { setActive(false);