7 ms·
React Suspense
- hkh28 7y agoInteresting 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 https://reactjs.org/docs/concurrent-mode-suspense.html
- eknkc 7y agoI 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.
- selbekk 7y agoPerhaps we'll get a release for Christmas or something? I empathise with this point of view though. Luckily, it's in the "experimental" release branch, so you can at least test it out on your side projects and get used to the APIs.
- beaker52 7y agoTotally agree with this. I keep seeing "suspense is coming, it's a game changer" but I am yet to see anything particularly game changing.
- yakshaving_jgt 7y agoThe joke is in the name, isn’t it?
- sudhirj 7y agoAre we actually doing one domain and website per blog post now?
- unityByFreedom 7y ago'tis the season
- selbekk 7y agoreact.christmas is on its third year of publishing 24 articles in 24 days every holiday season. :)
- droidist2 7y agoYes, it's pretty cool, like an advent calendar: https://react.christmas https://react.christmas Also several other topics following the same template: https://bekk.christmas https://bekk.christmas I love the different color patterns.
- selbekk 7y agoThe patterns are created by Kjetil Golid - you can see more of his work at https://generated.space https://generated.space
- cotelletta 7y agoI 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.
- eknkc 7y agoYeah, it is based on throwing promises that are not resolved. (which is weird but kind of makes sense) They have been reluctant to discuss the details there, I guess it's because the details might change before the production release so they don't want to spell the actual inner workings out just yet.
- gherkinnn 7y agoI for one prefer a “get it to work, play with it and then dive deeper” approach.
- yakshaving_jgt 7y agoIt’s not meant to be a quality tutorial. It’s a spammy content-marketing campaign that this company are running. They plan to publish 288 of these in a single month. They’ve already been banned from posting these to a site similar to HN.
- ehnto 7y agoI 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.
- badfrog 7y ago> 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. Isn't the point that the 200kb is static code that can be served immediately, while the rest can't? Regardless of whether the remaining 1.8mb is built on the server or client, it still isn't available "right now"
- picardo 7y agoI think what he is saying is since there is a network delay of 300ms for every request, it's better for him to make a single request for a large file than to have to make 10 requests for 200k files and wait 300ms * 10.
- girvo 7y agoReact 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.
- seer 7y agoHow interesting! I've been wanting to use fp-ts for a while now. How did you manage to convince your team to give it a go. It's certainly very different than other orthodox approaches to React (or TS for that matter)? Have you had any particular problems / downsides of using it? And lastly have you considered ReasonML instead? That's the other thing I've been following closely but it never feels quite ready to start working with, for someone not well versed in FP that is.
- girvo 7y agoTo your first question: simply put, the easiest way was slipping in usage of Either<L, R> for handling “successful failure” states; error handling in Typescript is still not fine grained enough, even with async functions (maybe even especially), so Either and Maybe/Option have been a big help. And once you have those, you might as well have them implement the same “interface”, and now you’re cooking with functors ;) No joke, it was error handling in successful promise resolves that made it an easy sell. I adore Reason — I use it extensively myself, but as I also adore OCaml this shouldn’t be surprising. The downside is that it’s a harder sell for a mostly backend team; it can definitely be used to great effect today, but Typescript for all its downsides is easier to use right now. Speaking of downsides: the major one with fp-ts (and io-ts) is some of the inscrutability of it’s more powerful abstractions for programmers who are not well versed in typed functional programming. But that’s okay: just don’t use them! You can get quite far with just the easy to understand concepts, and introduce things like EitherT or Task/IO and similar as the team becomes more confident with composing these data types!
- mesaframe 7y ago>will become a game changer when it comes to data fetching. Every other technology ever.
- typon 7y agoWhat's the difference between this and using Apollo Graphql for requests?
- bobobooey 7y agoNot sure what you mean...GraphQL is just the API endpoint. Using GQL or REST wouldn't make a difference on how suspense works. You'd still query and display your data in the same way. Suspense will just be a wrapper around the component displaying the data.
- choward 7y agoWith GraphQL you could in theory grab all the data a page needs in one request. Suspense seems to only be useful if you are making multiple requests. Not sure what Apollo has to do with anything though.
- bobobooey 7y agoIsn't still possible to wait for the data from that one request to be loaded? I'm also curious on how this will work with subscriptions.
- typon 7y agoConsider this code snippet using Apollo React Client: const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> );
- bobobooey 7y agoYou could still wrap this in a suspense wrapper.
- ljoshua 7y agoSo 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?
- revskill 7y agoYou have control on where to put `Spinner` component instead of putting it in all child component that needs "spinning"
- SamBam 7y agoI had the same question as you, but I think that the advantages are that (1) the parent is in control of the spinner, but (2) the child is in control of the data. In most apps I've worked with, either (1) or (2) doesn't hold. (1) The child is in control of the spinner: <Parent> <Child /> </Parent> Child() { if (!data) { return <Spinner /> } return <Data /> } (2) The parent is in control of the data <Parent> { state.data ? <Child data={data} /> : <Spinner /> } </Parent> With Suspense, the child fetches its own data, but the parent is in control of the spinner: <Parent> <Suspense fallback={<Spinner />}> <Child /> </Suspense> </Parent> So the Child doesn't need to know the details of how the parent app wants to deal delays. Suspense then seems to make it easier to parallelize the data requests, and have a spinner at the lowest parent with a child waiting for data.
- sammorrowdrums 7y agoAlso on this topic, the beta React lets you treat loading of both child components and or child data dependencies at a chosen level, bringing them in line with Error Boundaries. I think going all on on components is very easy to reason about. Same direction React Router went with component based routing making it very easy to for example have: - logged in user portal - catch all errors and show a fallback UI - lazy load child components by routes with fallback loader UI - use a loader fallback potentially for data dependency too. I mean, it's not perfect and I can see issues people are mentioning, but it feels pretty good to develop with. Add to this styled components and everything is so component based it's really nice. One main paradigm for the whole front-end. I don't think it's the best thing ever, but I've enjoyed the newer approaches when working with them.
- GrazeMor 7y agoIt'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.
- concerned_user 7y agoThere is no good way to to solve it other than just to use the appropriate tools like react-saga or placeholder state for components. If you try to make nested components load at the same time consequences can be unpredictable, suspense lacks fine grained control so it is basically a convenient shortcut, same as react state mixins were at the time.
- Tade0 7y agoIt's like with hooks and other, similar things: It solves a problem in React that's there because of React.
- iamleppert 7y agoThis pretty much sums up why I’m making my way away from web development in general.
- lioeters 7y agoI appreciated your honest opinion. I'm way too invested to move away, but I've often felt that things are getting overengineered, with the layers of complexity endlessly accumulating - real progress should be making things simpler. That said, React Suspense looks like it's an improvement of a common pattern, simpler to write and understand. Perhaps it's achieved by pushing the complexity "down" into the library, instead of letting the user manage it every time. My hope is that one day, all the lessons from React will be incorporated into browsers themselves, to clear the field for saner web development. Seeing how Web Components is going though, I'm not holding my breath..
- thebradbain 7y agoThis 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?