feat(useInterval): autorun options

Author: wangcch

README.md

@@ -228,10 +228,11 @@ const Demo = ({ value: Object }) => {
 
 Handle the setInterval timer function.
 
-| option | type     | default | explain                                 |
-| ------ | -------- | ------- | --------------------------------------- |
-| fn     | function | -       | Handle function. (setInterval callback) |
-| delay  | number   | -       | setInterval ms.                         |
+| option          | type     | default | explain                                 |
+| --------------- | -------- | ------- | --------------------------------------- |
+| fn              | function | -       | Handle function. (setInterval callback) |
+| delay           | number   | -       | setInterval ms.                         |
+| options.autorun | boolean  | true    | Runs automatically when mounted         |
 
 | return | type              | default | explain                           |
 | ------ | ----------------- | ------- | --------------------------------- |

src/useInterval.ts

@@ -4,6 +4,11 @@ import useUnmount from "./useUnmount";
 
 export type ETimerState = "idle" | "running";
 
+export type UseIntervalOptions = {
+  /** Runs automatically when mounted. @default true */
+  autorun?: boolean;
+};
+
 /**
  * useInterval
  *
@@ -12,8 +17,10 @@ export type ETimerState = "idle" | "running";
  */
 export default function useInterval(
   fn: () => void,
-  delay?: number
+  delay?: number,
+  options?: UseIntervalOptions
 ): { state: ETimerState; cancel: () => void; run: () => void } {
+  const { autorun = true } = options || {};
   const timer = useRef<ReturnType<typeof setTimeout>>();
   const fnRef = useRef<() => void>();
 
@@ -51,8 +58,10 @@ export default function useInterval(
       cancel();
     }
 
-    run();
-  }, [delay, cancel, run]);
+    if (autorun) {
+      run();
+    }
+  }, [delay, cancel, run, autorun]);
 
   useUnmount(cancel);
 

tests/useInterval.test.ts

@@ -175,6 +175,56 @@ describe("useInterval", () => {
     expect(count).toBe(3);
   });
 
+  it("options: autoRun", () => {
+    const fn = jest.fn();
+    const { rerender, result, unmount } = renderHook(() =>
+      useInterval(fn, 100, { autorun: false })
+    );
+
+    rerender();
+    expect(fn).toHaveBeenCalledTimes(0);
+    expect(result.current.state).toEqual("idle");
+
+    jest.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(0);
+    expect(result.current.state).toEqual("idle");
+
+    rerender();
+    rerender();
+    rerender();
+    jest.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(0);
+    expect(result.current.state).toEqual("idle");
+
+    act(() => {
+      result.current.run();
+    });
+
+    expect(fn).toHaveBeenCalledTimes(0);
+    expect(result.current.state).toEqual("running");
+    jest.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(result.current.state).toEqual("running");
+    jest.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(result.current.state).toEqual("running");
+
+    act(() => {
+      result.current.cancel();
+    });
+    expect(result.current.state).toEqual("idle");
+
+    jest.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(result.current.state).toEqual("idle");
+
+    unmount();
+
+    jest.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(result.current.state).toEqual("idle");
+  });
+
   it("Unmount", () => {
     const fn = jest.fn();
     const { result, rerender, unmount } = renderHook(() =>