Add useAsync hook to leverage new Hooks proposal

README.md

@@ -31,13 +31,13 @@
   </a>
 </p>
 
-React component for declarative promise resolution and data fetching. Leverages the Render Props pattern for ultimate
-flexibility as well as the new Context API for ease of use. Makes it easy to handle loading and error states, without
-assumptions about the shape of your data or the type of request.
+React component for declarative promise resolution and data fetching. Leverages the Render Props pattern and Hooks for
+ultimate flexibility as well as the new Context API for ease of use. Makes it easy to handle loading and error states,
+without assumptions about the shape of your data or the type of request.
 
 - Zero dependencies
 - Works with any (native) promise
-- Choose between Render Props and Context-based helper components
+- Choose between Render Props, Context-based helper components or the `useAsync` hook
 - Provides convenient `isLoading`, `startedAt` and `finishedAt` metadata
 - Provides `cancel` and `reload` actions
 - Automatic re-run using `watch` prop
@@ -71,6 +71,28 @@ npm install --save react-async
 
 ## Usage
 
+As a hook with `useAsync`:
+
+```js
+import { useAsync } from "react-async"
+
+const loadJson = () => fetch("/some/url").then(res => res.json())
+
+const MyComponent = () => {
+  const { data, error, isLoading } = useAsync({ promiseFn: loadJson })
+  if (isLoading) return "Loading..."
+  if (error) return `Something went wrong: ${error.message}`
+  if (data)
+    return (
+      <div>
+        <strong>Loaded some data:</strong>
+        <pre>{JSON.stringify(data, null, 2)}</pre>
+      </div>
+    )
+  return null
+}
+```
+
 Using render props for ultimate flexibility:
 
 ```js

package.json

@@ -24,7 +24,7 @@
     "src"
   ],
   "scripts": {
-    "build": "babel src -d lib",
+    "build": "rimraf lib && babel src -d lib --ignore '**/*spec.js'",
     "test": "jest src",
     "test:watch": "npm run test -- --watch",
     "test:compat": "npm run test:backwards && npm run test:forwards && npm run test:latest",
@@ -47,7 +47,8 @@
     "jest-dom": "2.1.0",
     "react": "16.7.0-alpha.0",
     "react-dom": "16.7.0-alpha.0",
-    "react-testing-library": "5.2.3"
+    "react-testing-library": "5.2.3",
+    "rimraf": "2.6.2"
   },
   "jest": {
     "coverageDirectory": "./coverage/",

src/index.js

@@ -1,4 +1,5 @@
 import React from "react"
+export { default as useAsync } from "./useAsync"
 
 const isFunction = arg => typeof arg === "function"
 

src/spec.js

@@ -1,13 +1,13 @@
 import "jest-dom/extend-expect"
 import React from "react"
 import { render, fireEvent, cleanup, waitForElement } from "react-testing-library"
-import Async, { createInstance } from "./"
+import Async, { createInstance, useAsync } from "./"
 
 afterEach(cleanup)
 
-const resolveIn = ms => value => new Promise(resolve => setTimeout(() => resolve(value), ms))
+const resolveIn = ms => value => new Promise(resolve => setTimeout(resolve, ms, value))
 const resolveTo = resolveIn(0)
-const rejectIn = ms => err => new Promise((resolve, reject) => setTimeout(() => reject(err), ms))
+const rejectIn = ms => err => new Promise((resolve, reject) => setTimeout(reject, ms, err))
 const rejectTo = rejectIn(0)
 
 test("runs promiseFn on mount", () => {
@@ -423,3 +423,10 @@ test("an unrelated change in props does not update the Context", async () => {
   )
   expect(one).toBe(two)
 })
+
+test("useAsync returns render props", async () => {
+  const promiseFn = () => new Promise(resolve => setTimeout(resolve, 0, "done"))
+  const Async = ({ children, ...props }) => children(useAsync(props))
+  const { getByText } = render(<Async promiseFn={promiseFn}>{({ data }) => data || null}</Async>)
+  await waitForElement(() => getByText("done"))
+})

src/useAsync.js

@@ -0,0 +1,96 @@
+import { useState, useEffect, useMemo } from "react"
+
+const useAsync = props => {
+  let counter = 0
+  let isMounted = false
+  let lastArgs = undefined
+
+  const initialError = props.initialValue instanceof Error ? props.initialValue : undefined
+  const initialData = initialError ? undefined : props.initialValue
+  const [data, setData] = useState(initialData)
+  const [error, setError] = useState(initialError)
+  const [startedAt, setStartedAt] = useState(props.promiseFn ? new Date() : undefined)
+  const [finishedAt, setFinishedAt] = useState(props.initialValue ? new Date() : undefined)
+
+  const cancel = () => {
+    counter++
+    setStartedAt(undefined)
+  }
+
+  const start = () => {
+    counter++
+    setStartedAt(new Date())
+    setFinishedAt(undefined)
+  }
+
+  const end = () => setFinishedAt(new Date())
+
+  const handleData = (data, callback = () => {}) => {
+    if (isMounted) {
+      end()
+      setData(data)
+      setError(undefined)
+      callback(data)
+    }
+    return data
+  }
+
+  const handleError = (error, callback = () => {}) => {
+    if (isMounted) {
+      end()
+      setError(error)
+      callback(error)
+    }
+    return error
+  }
+
+  const onResolve = count => data => count === counter && handleData(data, props.onResolve)
+  const onReject = count => error => count === counter && handleError(error, props.onReject)
+
+  const load = () => {
+    if (props.promiseFn) {
+      start()
+      props.promiseFn(props).then(onResolve(counter), onReject(counter))
+    }
+  }
+
+  const run = (...args) => {
+    if (props.deferFn) {
+      lastArgs = args
+      start()
+      return props.deferFn(...args, props).then(onResolve(counter), onReject(counter))
+    }
+  }
+
+  const reload = () => (lastArgs ? run(...lastArgs) : load())
+
+  useEffect(() => {
+    isMounted = true
+    return () => (isMounted = false)
+  }, [])
+
+  useEffect(load, [props.promiseFn, props.watch])
+
+  return useMemo(
+    () => ({
+      isLoading: startedAt && (!finishedAt || finishedAt < startedAt),
+      startedAt,
+      finishedAt,
+      data,
+      error,
+      cancel,
+      run,
+      reload,
+      setData: handleData,
+      setError: handleError,
+      initialValue: props.initialValue
+    }),
+    [data, error, startedAt, finishedAt]
+  )
+}
+
+const unsupported = () => {
+  throw new Error("useAsync requires [email protected] or later")
+}
+
+export default (useState ? useAsync : unsupported)