feat: added useDebounce

docs/useDebounce.md

@@ -0,0 +1,46 @@
+# `useDebounce`
+
+React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
+
+The third argument is the array of values that the debounce depends on, in the same manner as useEffect. The debounce timeout will start when one of the values changes.
+
+## Usage
+
+```jsx
+import React, { useState } from 'react';
+import { useDebounce } from 'react-use';
+
+const Demo = () => {
+  const [state, setState] = React.useState('Typing stopped');
+  const [val, setVal] = React.useState('');
+
+  useDebounce(
+    () => {
+      setState('Typing stopped');
+    },
+    2000,
+    [val]
+  );
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={val}
+        placeholder="Debounced input"
+        onChange={({ currentTarget }) => {
+          setState('Waiting for typing to stop...');
+          setVal(currentTarget.value);
+        }}
+      />
+      <div>{state}</div>
+    </div>
+  );
+};
+```
+
+## Reference
+
+```ts
+useDebouce(fn, ms: number, args: any[]);
+```

src/__stories__/useDebounce.story.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { useDebounce } from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const Demo = () => {
+  const [state, setState] = React.useState('Typing stopped');
+  const [val, setVal] = React.useState('');
+
+  useDebounce(
+    () => {
+      setState('Typing stopped');
+    },
+    2000,
+    [val]
+  );
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={val}
+        placeholder="Debounced input"
+        onChange={({ currentTarget }) => {
+          setState('Waiting for typing to stop...');
+          setVal(currentTarget.value);
+        }}
+      />
+      <div>{state}</div>
+    </div>
+  );
+};
+
+storiesOf('Side effects/useDebounce', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useDebounce.md')} />)
+  .add('Demo', () => <Demo />);

src/index.ts

@@ -6,6 +6,7 @@ import useBoolean from './useBoolean';
 import useCallbag from './useCallbag';
 import useCounter from './useCounter';
 import useCss from './useCss';
+import useDebounce from './useDebounce';
 import useFavicon from './useFavicon';
 import useGeolocation from './useGeolocation';
 import useGetSet from './useGetSet';
@@ -54,6 +55,7 @@ export {
   useCallbag,
   useCounter,
   useCss,
+  useDebounce,
   useFavicon,
   useGeolocation,
   useGetSet,

src/useDebounce.ts

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+const useDebounce = (fn: () => any, ms: number = 0, args: Array<any> = []) => {
+  const [timeout, setTimeoutVar] = useState<number>(-1);
+
+  useEffect(() => {
+    // if args change then clear timeout
+    clearTimeout(timeout);
+    const t = setTimeout(fn.bind(null, args), ms);
+    setTimeoutVar(t);
+  }, args);
+};
+
+export default useDebounce;