>The client side thing of implementing async loading with a loading prop and componentDidMount obviously has to be done 'manually', this is straightforward and not something I'd expect React or even a library to solve
The problem Suspense is solving on the client is not straightforward. But you'll need to see my demo (second part of this talk[1]). It's very hard to talk about in abstract without seeing it.
The big difference Suspense brings is the ability to wait with the whole state transition until all leaves are ready. Think transitioning between pages (that need data) is as easy as updating state in the parent, and React takes care of “waiting” for the page to be ready before displaying it (or falling back to a placeholder).
>This is much more fiddly and is way too much boilerplate to write manually for each component, not to mention that you need some global context to tie all the promises together
Suspense takes care of that, you don’t need to manually collect Promises.
Cool - I will definitely go actually figure out what Suspense does in detail. Thanks for the link!
Now you've got me thinking, and you're right. Even in a client-only case, the simple spinner-until-data-loaded pattern works for a solo component just fine, but doesn't at all account for waiting for children, etc, without implicit dependencies between parent and child. If you've got stuff like that going on, then yes this is a pretty complex problem.
It does definitely seem like Suspense is going to remove most of the complexity involved in the 'synchronous' server render problem, especially with regards to manual promise collection. This is awesome work :-)
>The client side thing of implementing async loading with a loading prop and componentDidMount obviously has to be done 'manually', this is straightforward and not something I'd expect React or even a library to solve
The problem Suspense is solving on the client is not straightforward. But you'll need to see my demo (second part of this talk[1]). It's very hard to talk about in abstract without seeing it.
The big difference Suspense brings is the ability to wait with the whole state transition until all leaves are ready. Think transitioning between pages (that need data) is as easy as updating state in the parent, and React takes care of “waiting” for the page to be ready before displaying it (or falling back to a placeholder).
>This is much more fiddly and is way too much boilerplate to write manually for each component, not to mention that you need some global context to tie all the promises together
Suspense takes care of that, you don’t need to manually collect Promises.
[1]: https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-...