fix: cleanup of timeout/interval effect on interval-prop change

.changeset/silver-radios-tickle.md

@@ -0,0 +1,5 @@
+---
+'classic-react-hooks': minor
+---
+
+- Fix timeout and interval effect cleanup when interval changes

src/lib/use-interval-effect/index.test.tsx

@@ -69,4 +69,26 @@ describe('use-interval-effect', () => {
       unmount()
       expect(fn).toHaveBeenCalledTimes(0)
    })
+
+   it('should clear the interval when <interval> prop changes', () => {
+      const fn = vi.fn()
+
+      let interval = 300
+      const { result, rerender } = renderHook(() => useIntervalEffect({ handler: fn, interval }))
+
+      vi.advanceTimersByTime(200)
+      expect(fn).not.toHaveBeenCalled()
+
+      interval = 500
+      rerender()
+
+      vi.advanceTimersByTime(200)
+      expect(fn).not.toHaveBeenCalled()
+
+      vi.advanceTimersByTime(300)
+      expect(fn).toHaveBeenCalledTimes(1)
+
+      vi.advanceTimersByTime(500)
+      expect(fn).toHaveBeenCalledTimes(2)
+   })
 })

src/lib/use-interval-effect/index.tsx

@@ -47,9 +47,9 @@ export default function useIntervalEffect({ handler, interval = 100 }: { handler
    })
 
    useEffect(() => {
-      intervalId.current = setInterval(() => paramsRef.current.handler(), paramsRef.current.interval)
+      intervalId.current = setInterval(() => paramsRef.current.handler(), interval)
       return handlers.current.clearTimer
-   }, [])
+   }, [interval])
 
    return {
       clearTimer: handlers.current.clearTimer,

src/lib/use-timeout-effect/index.test.tsx

@@ -49,6 +49,25 @@ describe('useTimeoutEffect', () => {
    })
 
    describe('clearTimer functionality', () => {
+      it('should clear the timeout when <timeout> prop changes', () => {
+         const fn = vi.fn()
+
+         let timeout = 300
+         const { result, rerender } = renderHook(() => useTimeoutEffect({ handler: fn, timeout }))
+
+         vi.advanceTimersByTime(200)
+         expect(fn).not.toHaveBeenCalled()
+
+         timeout = 500
+         rerender()
+
+         vi.advanceTimersByTime(200)
+         expect(fn).not.toHaveBeenCalled()
+
+         vi.advanceTimersByTime(300)
+         expect(fn).toHaveBeenCalledTimes(1)
+      })
+
       it('should clear the timeout with clearTimer before timeout expires', () => {
          const fn = vi.fn()
          const { result } = renderHook(() => useTimeoutEffect({ handler: fn, timeout: 500 }))

src/lib/use-timeout-effect/index.tsx

@@ -41,9 +41,9 @@ export default function useTimeoutEffect({ handler, timeout = 100 }: { handler:
    })
 
    useEffect(() => {
-      timeoutId.current = setTimeout(() => paramsRef.current.handler(), paramsRef.current.timeout)
+      timeoutId.current = setTimeout(() => paramsRef.current.handler(), timeout)
       return handlers.current.clearTimer
-   }, [])
+   }, [timeout])
 
    return {
       clearTimer: handlers.current.clearTimer,