React Suspense

selbekk | 92 points

I don't know that I will ever be happy with lazy loaded UIs over a more traditional "Deliver everything first, update later" approach. Hopefully Suspense is a step to solving the problem.

I live in Australia, so there's a perceptible ~300ms delay for every action in react-like loaded later UIs that aren't hosted in Australia, which is most of the tools that I use. They feel clunky and broken, and the amount of times you miss-click because something pops in suddenly and moves the button you wanted down the page. I don't think it's the UI they think they've built.

I don't think it will ever be good enough to throw 20 requests and wait for everything to update, bounce the page around and at long last be intractable. I would rather receive a 2mb page right now, than a 200kb page that slowly grows to a 2mb page over the course of 20 components individually loading themselves.

ehnto | 4 years ago

So I'm not entirely clear on the advantage that Suspense has over the typical pattern of loading data in componentDidMount, and just having a bit of logic that checks whether your data has loaded or not and renders the spinner or the actual contents. It's not really a hard pattern to implement, though sure, it takes a few extra lines. Seems like the <Suspense> component just kind of abstracts this a bit? What am I missing?

ljoshua | 4 years ago

I feel like Suspense has been in development for a decade now. I know, I know.. They should not release it until they are comfortable about its stability. But still, all the teasers and pushed back roadmaps are not helping at this point.

This is because I feel like it's gonna be great for our apps and can't wait to try it on production though.

eknkc | 4 years ago

Interesting introduction to suspense, didn't know about it. A word of caution might be that it is still an experimental feature [0], so you should probably not be throwing it into production just yet. But when it gets released as stable, it could really improve a lot of sites!

[0] https://reactjs.org/docs/concurrent-mode-suspense.html

hkh28 | 4 years ago

It's weird how the article mentions that before Suspense there was a waterfall issue. But as far as I understand Suspense introduces the waterfall issue. If you have nested components that need data, the data has to load serially rather than in parallel which creates a waterfall and React devs don't seem to know how to fix this issue.

GrazeMor | 4 years ago

I hate tutorials that don't explain you how something is actually implemented in the framework, as if you don't need to know your own tools.

I'm inferring suspense is based on exceptions to interrupt unrenderable components, but it would be nice if the author told me.

cotelletta | 4 years ago

React Suspense, with hooks and fp-ts has given our team a massive leg up in terms of rapidly building out our products new front ends. Being able to combine typed functional programming with the functional-like abstractions given to you by React nowadays makes for a very nice, very straightforward to debug app, without bringing in dozens of dependencies to get this behaviour.

Ant Design has also been a game changer for us.

girvo | 4 years ago

This pretty much sums up why I’m making my way away from web development in general.

iamleppert | 4 years ago

>will become a game changer when it comes to data fetching.

Every other technology ever.

mesaframe | 4 years ago

This looks super cool, and I can immediately see how it'd be immediately useful in production apps both because of potential use-cases and how straightforward it seems to integrate. Is there anything similar in development within Vue land, or is this intrinsically tied to the React render model?

thebradbain | 4 years ago

What's the difference between this and using Apollo Graphql for requests?

typon | 4 years ago

Are we actually doing one domain and website per blog post now?

sudhirj | 4 years ago