From 22682c176c9f89761f4a5d63fe85f0e1108eca4e Mon Sep 17 00:00:00 2001
From: Ward Oosterlijnck <wardoosterlijnck@gmail.com>
Date: Tue, 9 Apr 2019 00:18:07 +1000
Subject: [PATCH 1/2] useAsyncCallback

---
 README.md                                  |  1 +
 docs/useAsyncCallback.md                   | 36 ++++++++++++++++
 src/__stories__/useAsyncCallback.story.tsx | 35 ++++++++++++++++
 src/index.ts                               |  2 +
 src/useAsyncCallback.ts                    | 48 ++++++++++++++++++++++
 5 files changed, 122 insertions(+)
 create mode 100644 docs/useAsyncCallback.md
 create mode 100644 src/__stories__/useAsyncCallback.story.tsx
 create mode 100644 src/useAsyncCallback.ts

diff --git a/README.md b/README.md
index e8ba202ec9..d465d25c72 100644
--- a/README.md
+++ b/README.md
@@ -73,6 +73,7 @@
     <br/>
 - [**Side-effects**](./docs/Side-effects.md)
   - [`useAsync`](./docs/useAsync.md) &mdash; resolves an `async` function.
+  - [`useAsyncCallback`](./docs/useAsyncCallback.md) &mdash; state management for async callback
   - [`useAsyncRetry`](./docs/useAsyncRetry.md) &mdash; `useAsync` with `retry()` method.
   - [`useCopyToClipboard`](./docs/useCopyToClipboard.md) &mdash; copies text to clipboard.
   - [`useDebounce`](./docs/useDebounce.md) &mdash; debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo)
diff --git a/docs/useAsyncCallback.md b/docs/useAsyncCallback.md
new file mode 100644
index 0000000000..bd07d2c4ab
--- /dev/null
+++ b/docs/useAsyncCallback.md
@@ -0,0 +1,36 @@
+# `useAsyncCallback`
+
+React hook that returns state and a callback for an `async` function or a
+function that returns a promise. The state is of the same shape as `useAsync`.
+
+## Usage
+
+```jsx
+import {useAsyncCallback} from 'react-use';
+
+const Demo = (url) => {
+  const [state, fetch] = useAsyncCallback(async () => {
+    const response = await fetch(url);
+    const result = response.text();
+    return result
+  }), [url];
+
+  return (
+    <div>
+      {state.loading
+        ? <div>Loading...</div>
+        : state.error
+          ? <div>Error: {state.error.message}</div>
+          : state.value && <div>Value: {state.value}</div>
+      }
+      <button onClick={() => fetch()}>Start loading</button>
+    </div>
+  );
+};
+```
+
+## Reference
+
+```ts
+useAsyncCallback(fn, deps?: any[]);
+```
diff --git a/src/__stories__/useAsyncCallback.story.tsx b/src/__stories__/useAsyncCallback.story.tsx
new file mode 100644
index 0000000000..ddb2941343
--- /dev/null
+++ b/src/__stories__/useAsyncCallback.story.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useAsyncCallback} from '..';
+import ShowDocs from './util/ShowDocs';
+
+const fn = () =>
+  new Promise<string>((resolve, reject) => {
+    setTimeout(() => {
+      if (Math.random() > 0.5) {
+        reject(new Error('Random error!'));
+      } else {
+        resolve('RESOLVED');
+      }
+    }, 1000);
+  });
+
+const Demo = () => {
+  const [{loading, error, value}, callback] = useAsyncCallback<string>(fn);
+
+  return (
+    <div>
+      {loading
+        ? <div>Loading...</div>
+        : error
+          ? <div>Error: {error.message}</div>
+          : value && <div>Value: {value}</div>
+      }
+      <button onClick={() => callback()}>Start</button>
+    </div>
+  );
+};
+
+storiesOf('Side effects|useAsyncCallback', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useAsyncCallback.md')} />)
+  .add('Demo', () => <Demo/>)
diff --git a/src/index.ts b/src/index.ts
index 6176465943..c0ff7e4d12 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 import createMemo from './createMemo';
 import useAsync from './useAsync';
+import useAsyncCallback from './useAsyncCallback';
 import useAsyncRetry from './useAsyncRetry';
 import useAudio from './useAudio';
 import useBattery from './useBattery';
@@ -71,6 +72,7 @@ import useUpdateEffect from './useUpdateEffect'
 export {
   createMemo,
   useAsync,
+  useAsyncCallback,
   useAsyncRetry,
   useAudio,
   useBattery,
diff --git a/src/useAsyncCallback.ts b/src/useAsyncCallback.ts
new file mode 100644
index 0000000000..d89f166679
--- /dev/null
+++ b/src/useAsyncCallback.ts
@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback, DependencyList } from 'react';
+import useRefMounted from "./useRefMounted"
+
+export type AsyncState<T> =
+| {
+  loading: boolean;
+  error?: undefined;
+  value?: undefined;
+}
+| {
+  loading: false;
+  error: Error;
+  value?: undefined;
+}
+| {
+  loading: false;
+  error?: undefined;
+  value: T;
+};
+
+const useAsyncCallback = <T>(fn: () => Promise<T>, deps: DependencyList = []): [AsyncState<T>, () => void] => {
+  const [state, set] = useState<AsyncState<T>>({
+    loading: false
+  });
+
+  const mounted = useRefMounted();
+
+  const callback = useCallback(() => {
+    set({loading: true});
+
+    fn().then(
+      value => {
+        if (mounted.current) {
+          set({value, loading: false});
+        }
+      },
+      error => {
+        if (mounted.current) {
+          set({error, loading: false});
+        }
+      }
+    );
+  }, deps);
+
+  return [state, callback]
+};
+
+export default useAsyncCallback;

From f139b9f7b4f6b9a38da71802e6c7edacc0057c3f Mon Sep 17 00:00:00 2001
From: Ward Oosterlijnck <wardoosterlijnck@gmail.com>
Date: Tue, 9 Apr 2019 00:23:39 +1000
Subject: [PATCH 2/2] docs: useAsyncCallback typo

---
 docs/useAsyncCallback.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/useAsyncCallback.md b/docs/useAsyncCallback.md
index bd07d2c4ab..4e54eab96a 100644
--- a/docs/useAsyncCallback.md
+++ b/docs/useAsyncCallback.md
@@ -11,7 +11,7 @@ import {useAsyncCallback} from 'react-use';
 const Demo = (url) => {
   const [state, fetch] = useAsyncCallback(async () => {
     const response = await fetch(url);
-    const result = response.text();
+    const result = await response.text();
     return result
   }), [url];