Integration with Suspense

[ghengeveld]

This is an umbrella issue to discuss and implement support for Suspense. The major difference is the way the loading state is rendered, using the Suspense fallback instead of Async.Loading.

Things to consider:

• Ideally this should not change the API to React Async. It should be a free and invisible upgrade.
• How can Async know we're using Suspense?
• This should work with multiple promises, both in parallel and sequential.
• The same or similar API should be available through useAsync.

[Kaltsoon]

@ghengeveld, would it be possible to release some experimental argument to useAsync and Async such as suspend which is used by e.g. react-apollo-hooks? react-i18next has similar useSuspense argument. In my opinion Suspense support is the most important new feature and it would be awesome to start testing it soon.

Btw, thanks for the awesome library!

[ghengeveld]

Yes, that's probably going to be the approach. One thing to consider is that we want to keep backwards compatibility with older versions of React. Right now we support 16.3, but I'm fine shifting that to, say, 16.6. As a rule of thumb I'd say supporting up to 3 minor versions back is fair.

I actually have a suspense branch on my local machine with some preliminary work. It's been a long time since I touched it though, so it's not on par with the latest version of React Async, nor React itself.

I think integrating Suspense properly will require rethinking how React Async works. Essentially Suspense inverts the flow for async data. In React Async, you fetch data at one point and pass it down the component hierarchy. In Suspense you fetch data and throw it up the tree. This is a pretty big shift in thinking about application architecture.

[ghengeveld]

I've created a basic example using Suspense with an Async component / useAsync. It's essentially a barebones reimplementation of React Async, which accepts a suspend flag to enable Suspense integration. Right now it doesn't even use a cache mechanism, as is common with Suspense. We may or may not need to add that.

https://codesandbox.io/s/basic-async-suspense-e5yx7

Try adding/removing the suspend flag. Notice that with Suspense, both promises are awaited before rendering, while without Suspense, the two results are rendered as soon as the promise settles.

[ghengeveld]

PR is here: #153