Add useAsync hook to leverage new Hooks proposal

[ghengeveld]

--- This is pending test coverage ---

Usage example:

import { useAsync } from "react-async"

const promiseFn = () => fetch("/example")

const MyComponent = () => {
  const { data, error, isLoading } = useAsync({ promiseFn })
  
  // do stuff...
}

Eventually this can replace <Async> altogether:

const Async = ({ children, ...props }) => children(useAsync(props))

[codecov]

Codecov Report

Merging #9 into master will decrease coverage by 2.08%.
The diff coverage is 97.91%.

@@            Coverage Diff             @@
##           master       #9      +/-   ##
==========================================
- Coverage     100%   97.91%   -2.09%     
==========================================
  Files           1        1              
  Lines         113       48      -65     
  Branches       37       17      -20     
==========================================
- Hits          113       47      -66     
- Misses          0        1       +1

Impacted Files	Coverage Δ
src/useAsync.js	97.91% <97.91%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 450aad8...73e6cb2. Read the comment docs.

[sibelius]

Can we avoid isLoading, and use React Suspense instead?

[ghengeveld]

Suspense is not released yet. Eventually React Async will support both. At first, React Async will maintain its API but use Suspense underneath. Later on I'll look into better integration with the Suspense components (e.g. Placeholder/Timeout). Right now there's no telling how Suspense will be used in practice.

[jimthedev]

I have to agree with @sibelius. It seems like any new api surface for async right now should at least consider the usage of resources, cache invalidation and suspense. The react team has mentioned that react-cache is a WIP and that invalidation is outstanding. Their vision seems to be using resource for data fetching. Any new api surface surface should at least be able to show how it fits into that future.

[ghengeveld]

I agree, I want React Async to be future compatible. I'm confident it will still be relevant despite Suspense offering very similar features. Personally I'm surprised that they even took the whole thing as far as providing a cache mechanism. That to me sound like a very application specific thing. A simple library around Promises could easily provide the same functionality, which is why React Async doesn't do any caching, you can simply bring your own.

So what would closer integration with Suspense look like? I'm hesitant to adopt the same API, and relying on interop between the two (i.e. using Async with Timeout or Placeholder) seems awkward and error prone. What are your thoughts on this?

[msokk]

Personally I'm surprised that they even took the whole thing as far as providing a cache mechanism.

I haven't dug into code that does the suspending in React reconciler, but the mechanism how WIP react-cache package gets render to suspend is through throwing a pending promise -https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L158 Before throwing the pending promise out to React renderer, one needs to store the promise somewhere, to access it again when promise gets resolved and render is retried, hence the need for react-cache. Also I think the react-cache won't be mandatory for suspense, so anyone can roll their own:

It also serves as a reference for more advanced caching implementations.
https://github.com/facebook/react/tree/master/packages/react-cache

Atleast that's how I understand it.

[ghengeveld]

@all-contributors please add @sibelius for review

[allcontributors]

@ghengeveld

I've put up a pull request to add @sibelius! 🎉

[ghengeveld]

@all-contributors please add @jimthedev for review

[allcontributors]

@ghengeveld

I've put up a pull request to add @jimthedev! 🎉

[ghengeveld]

@all-contributors please add @msokk for review

[allcontributors]

@ghengeveld

I've put up a pull request to add @msokk! 🎉