feat: Add option in useInterval to run immediately (#15)

* Add option to run immediately on mount in useInterval

* Add a test

* One more test

* Fix accidental changing of other file.

Author: patricktemple

README.md

@@ -13,7 +13,7 @@ npm install @restart/hooks
 ```js
 import useInterval from '@restart/hooks/useInterval'
 
-useInterval(() => loop(), false, 300)
+useInterval(() => loop(), 300, false)
 ```
 
 [npm-badge]: https://img.shields.io/npm/v/@restart/hooks.svg

src/useInterval.ts

@@ -8,18 +8,32 @@ import useCommittedRef from './useCommittedRef'
  * @param ms The milliseconds duration of the interval
  */
 function useInterval(fn: () => void, ms: number): void
+
 /**
- * Creates a pasuable `setInterval` that is properly cleaned up when a component unmounted
+ * Creates a pausable `setInterval` that is properly cleaned up when a component unmounted
  *
  * @param fn an function run on each interval
  * @param ms The milliseconds duration of the interval
  * @param paused Whether or not the interval is currently running
  */
 function useInterval(fn: () => void, ms: number, paused: boolean): void
+
+/**
+ * Creates a pausable `setInterval` that is properly cleaned up when a component unmounted
+ *
+ * @param fn an function run on each interval
+ * @param ms The milliseconds duration of the interval
+ * @param paused Whether or not the interval is currently running
+ * @param runImmediately Whether to run the function immediately on mount or unpause
+ * rather than waiting for the first interval to elapse
+ */
+function useInterval(fn: () => void, ms: number, paused: boolean, runImmediately: boolean): void
+
 function useInterval(
   fn: () => void,
   ms: number,
   paused: boolean = false,
+  runImmediately: boolean = false,
 ): void {
   let handle: number
   const fnRef = useCommittedRef(fn)
@@ -38,9 +52,13 @@ function useInterval(
   }
 
   useEffect(() => {
-    schedule()
+    if (runImmediately) {
+      tick()
+    } else {
+      schedule()
+    }
     return () => clearTimeout(handle)
-  }, [paused])
+  }, [paused, runImmediately])
 }
 
 export default useInterval

test/useInterval.test.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+
+import { mount } from 'enzyme'
+
+import useInterval from '../src/useInterval'
+
+describe('useTimeout', () => {
+  it('should set an interval', () => {
+    jest.useFakeTimers()
+
+    let spy = jest.fn()
+
+    function Wrapper() {
+      useInterval(spy, 100);
+
+      return <span />
+    }
+
+    mount(<Wrapper />)
+
+    expect(spy).not.toHaveBeenCalled()
+    jest.runOnlyPendingTimers()
+    expect(spy).toHaveBeenCalledTimes(1)
+    jest.runOnlyPendingTimers()
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should run immediately when argument is set', () => {
+    jest.useFakeTimers()
+    let spy = jest.fn()
+
+    function Wrapper() {
+      useInterval(spy, 100, false, true);
+
+      return <span />
+    }
+
+    mount(<Wrapper />)
+
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not run when paused', () => {
+    jest.useFakeTimers()
+    let spy = jest.fn()
+
+    function Wrapper() {
+      useInterval(spy, 100, true);
+
+      return <span />
+    }
+
+    mount(<Wrapper />)
+
+    jest.runOnlyPendingTimers()
+    expect(spy).not.toHaveBeenCalled()
+  })
+
+  it('should stop running on unmount', () => {
+    jest.useFakeTimers()
+    let spy = jest.fn()
+
+    function Wrapper() {
+      useInterval(spy, 100);
+
+      return <span />
+    }
+
+    const wrapper = mount(<Wrapper />)
+    wrapper.unmount()
+
+    jest.runOnlyPendingTimers()
+    expect(spy).not.toHaveBeenCalled()
+  })
+})