From 599efdb6b6de01e46dcc8652f365bd253b96eba9 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Wed, 17 Jul 2019 00:19:50 +0200
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20component=20useIn?=
 =?UTF-8?q?terval=20to=20README,=20improve=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                             | 1 +
 docs/useInterval.md                   | 8 ++++----
 src/__stories__/useInterval.story.tsx | 2 +-
 src/useDebounce.ts                    | 1 -
 src/useInterval.ts                    | 1 +
 tslint.json                           | 3 ++-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 81d71f12..79ffd97a 100644
--- a/README.md
+++ b/README.md
@@ -78,6 +78,7 @@
     <br/>
 - [**Animations**](./docs/Animations.md)
   - [`useRaf`](./docs/useRaf.md) &mdash; re-renders component on each `requestAnimationFrame`.
+  - [`useInterval`](./docs/useInterval.md) &mdash; re-renders component on a set interval using `setInterval`.
   - [`useSpring`](./docs/useSpring.md) &mdash; interpolates number over time according to spring dynamics.
   - [`useTimeout`](./docs/useTimeout.md) &mdash; returns true after a timeout.
   - [`useTween`](./docs/useTween.md) &mdash; re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl)
diff --git a/docs/useInterval.md b/docs/useInterval.md
index c6e2d527..37930aaf 100644
--- a/docs/useInterval.md
+++ b/docs/useInterval.md
@@ -1,12 +1,12 @@
 # `useInterval`
 
-React hook that allow you using declarative setInterval.
+React hook that allow you using declarative `setInterval`.
 
 ## Usage
 
 ```jsx
 import * as React from 'react';
-import { useInterval } from 'react-use';
+import useInterval from 'react-use/lib/useInterval';
 
 const Demo = () => {
   const [count, setCount] = React.useState(0);
@@ -23,11 +23,11 @@ const Demo = () => {
   return (
     <div>
       <div>
-        delay: <input type="text" value={delay} onChange={handleDelayChange} />
+        delay: <input value={delay} onChange={handleDelayChange} />
       </div>
       <h1>count: {count}</h1>
       <div>
-        <button onClick={() => setDelay(null)}>stop</button>
+        <button onClick={() => setDelay(delay ? null : 1000)}>{delay ? 'stop' : 'start'}</button>
       </div>
     </div>
   );
diff --git a/src/__stories__/useInterval.story.tsx b/src/__stories__/useInterval.story.tsx
index 4e5e7672..e5cd0f16 100644
--- a/src/__stories__/useInterval.story.tsx
+++ b/src/__stories__/useInterval.story.tsx
@@ -22,7 +22,7 @@ const Demo = () => {
       </div>
       <h1>count: {count}</h1>
       <div>
-        <button onClick={() => setDelay(null)}>stop</button>
+        <button onClick={() => setDelay(delay ? null : 1000)}>{delay ? 'stop' : 'start'}</button>
       </div>
     </div>
   );
diff --git a/src/useDebounce.ts b/src/useDebounce.ts
index e61b34d8..5c7e80e6 100644
--- a/src/useDebounce.ts
+++ b/src/useDebounce.ts
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useUpdateEffect } from '..';
 
 const useDebounce = (fn: () => any, ms: number = 0, args: any[] = []) => {
diff --git a/src/useInterval.ts b/src/useInterval.ts
index d26718c5..e3c60c54 100644
--- a/src/useInterval.ts
+++ b/src/useInterval.ts
@@ -12,6 +12,7 @@ const useInterval = (callback: Function, delay?: number | null) => {
       const interval = setInterval(() => latestCallback.current(), delay || 0);
       return () => clearInterval(interval);
     }
+    return undefined;
   }, [delay]);
 };
 
diff --git a/tslint.json b/tslint.json
index 357cc2c6..cd6d7f86 100644
--- a/tslint.json
+++ b/tslint.json
@@ -30,7 +30,8 @@
         "printWidth": 120,
         "tabWidth": 2
       }
-    ]
+    ],
+    "ordered-imports": false
   },
   "rulesDirectory": ["tslint-plugin-prettier"]
 }