feat: 🎸 add useAsync hook

Author: streamich

README.md

@@ -31,7 +31,7 @@
 ## Reference
 
 - [__Sensors__](./docs/Sensors.md)
-   - [`useBattery`](./docs/useBattery.md) — tracks device batter state.
+   - [`useBattery`](./docs/useBattery.md) — tracks device battery state.
    - [`useGeolocation`](./docs/useGeolocation.md) — tracks geo location state of user's device.
    - [`useHover`](./docs/useHover.md) — tracks mouse hover state of some element.
    - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive.
@@ -53,6 +53,7 @@
      <br/>
      <br/>
 - [__Side-effects__](./docs/Side-effects.md)
+   - [`useAsync`](./docs/useAsync.md) &mdash; resolves an `async` function.
    - [`useCss`](./docs/useCss.md) &mdash; dynamically adjusts CSS.
    - [`useFavicon`](./docs/useFavicon.md) &mdash; sets favicon of the page.
    - [`useTitle`](./docs/useTitle.md) &mdash; sets title of the page.

docs/useAsync.md

@@ -0,0 +1,31 @@
+# `useAsync`
+
+React hook that resolves an `async` function or a function that returns
+a promise;
+
+
+## Usage
+
+```jsx
+import {useAsync} from 'react-use';
+
+// Returns a Promise that resolves after one second.
+const fn = () => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve('RESOLVED');
+  }, 1000);
+});
+
+const Demo = () => {
+  const {loading, value, error} = useAsync(fn);
+
+  return (
+    <div>
+      {loading
+        ? <div>Loading...</div>
+        : <div>Value: {value}</div>
+      }
+    </div>
+  );
+};
+```

src/__stories__/useAsync.story.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useAsync} from '..';
+
+const fn = () => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve('RESOLVED');
+  }, 1000);
+});
+
+const Demo = () => {
+  const {loading, value} = useAsync(fn);
+
+  return (
+    <div>
+      {loading
+        ? <div>Loading...</div>
+        : <div>Value: {value}</div>
+      }
+    </div>
+  );
+};
+
+storiesOf('useAsync', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -1,3 +1,4 @@
+import useAsync from './useAsync';
 import useBattery from './useBattery';
 import useCounter from './useCounter';
 import useCss from './useCss';
@@ -23,6 +24,7 @@ import useTween from './useTween';
 import useWindowSize from './useWindowSize';
 
 export {
+  useAsync,
   useBattery,
   useCounter,
   useCss,

src/react.ts

@@ -8,3 +8,6 @@ export const useEffect: UseEffect = (React as any).useEffect;
 
 export type UseRef = <T>(initialValue: T) => {current: T};
 export const useRef: UseRef = (React as any).useRef;
+
+export type UseCallback = <T extends ((...args: any[]) => any)>(callback: T, args: any[]) => T;
+export const useCallback: UseCallback = (React as any).useCallback;

src/useAsync.ts

@@ -0,0 +1,44 @@
+import {useState, useEffect, useCallback} from './react';
+
+export interface AsyncState<T> {
+  loading: boolean;
+  error?: Error | any;
+  value?: T;
+}
+
+const useAsync = <T>(fn: () => Promise<T>, args?) => {
+  const [state, set] = useState<AsyncState<T>>({
+    loading: true,
+  });
+  const memoized = useCallback(fn, args);
+
+  useEffect(() => {
+    let mounted = true;
+    const promise = memoized();
+
+    promise
+      .then(value => {
+        if (mounted) {
+          set({
+            loading: false,
+            value,
+          });
+        }
+      }, error => {
+        if (mounted) {
+          set({
+            loading: false,
+            error,
+          });
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [memoized]);
+
+  return state;
+};
+
+export default useAsync;