fix(useInterval): prevent immediate callback from refiring when enabled is toggled (toss#352)

Author: eunwoo-levi

.changeset/lovely-spies-change.md

@@ -0,0 +1,5 @@
+---
+'react-simplikit': patch
+---
+
+fix(core/hooks): prevent immediate callback from re-firing when enabled is toggled

packages/core/src/hooks/useInterval/useInterval.spec.ts

@@ -124,6 +124,26 @@ describe('useInterval', () => {
     });
   });
 
+  it('should not re-fire immediate callback when enabled is toggled', async () => {
+    const callback = vi.fn();
+    const { rerender } = await renderHookSSR(
+      ({ enabled }) =>
+        useInterval(callback, {
+          delay: 1000,
+          immediate: true,
+          enabled,
+        }),
+      { initialProps: { enabled: true } }
+    );
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    rerender({ enabled: false });
+    rerender({ enabled: true });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
   it('should handle enabled flag changes appropriately', async () => {
     const callback = vi.fn();
     const { rerender } = await renderHookSSR(

packages/core/src/hooks/useInterval/useInterval.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { usePreservedCallback } from '../usePreservedCallback/index.ts';
 
@@ -45,12 +45,25 @@ export function useInterval(callback: () => void, options: IntervalOptions) {
   const enabled = typeof options === 'number' ? true : (options.enabled ?? true);
 
   const preservedCallback = usePreservedCallback(callback);
+  const immediateCalledRef = useRef(false);
 
   useEffect(
     function runImmediateCallback() {
-      if (immediate === true && enabled) {
-        preservedCallback();
+      if (immediate !== true) {
+        immediateCalledRef.current = false;
+        return;
+      }
+
+      if (!enabled) {
+        return;
       }
+
+      if (immediateCalledRef.current) {
+        return;
+      }
+
+      immediateCalledRef.current = true;
+      preservedCallback();
     },
     [immediate, preservedCallback, enabled]
   );