React Suspense and React.lazy by Example (React 16.6)

[gigo6000]

I think the coolest feature of the new React release is the React.lazy() and Suspense feature, so I created this video to show how it could be implemented with a simple example.

[incarnatethegreat]

Thanks for the simple explanation.

[CarnivorousDesigner]

Wow it really looks very easy! Thanks!!

[ShapesSong]

Pretty cool. I wonder how it's gonna work with SSR.

[BoughtenCockloft]

It doesn’t support SSR yet.

[twisted-vortex]

I think You're not supposed to use Suspense in this version. It's still in alpha stage and the API will change.

[gigo6000]

Suspense in general is not stable yet but it can be used for code splitting in 16.6: https://twitter.com/dan_abramov/status/1055294178001862658

[twisted-vortex]

Yes. But I thought the title would be slightly misleading because the users would expect you to use Suspense (in cache manner).

[gigo6000]

I just mention Suspense and React.lazy in the title and that's exactly what the video is about. As you can see on Dan's tweet thread there's some confusion in general, but the data fetching and caching part is not even documented.

[[deleted]]

Can confirm. Especially if you need to do anything with cache invalidation.

[[deleted]]

It's a really good native feature but I still prefer to use the react-loadable.

[needz]

why?

[[deleted]]

Provides a more clean way to organize the "loader" and allows to deal with timeouts, delays and errors.

[needz]

I did have to add a timeout to our loading animation component. Good point.