Kent C. Dodds explains why Suspense is a big deal.
Kent C. Dodds explains why Suspense is a big deal. Suspense makes dealing with asynchronicity easier. The main idea is Suspense allows the developer to tell React to stop rendering a particular component because something’s not ready for it to render yet.
Check out Kent C. Dodd's egghead.io course Use Suspense to Simplify Your Async UI to learn more!
"Using React Suspense to Simplify Your Async UI With Kent C. Dodds" Transcript
Taylor Bell: All right. Hey Kent, thanks for meeting up today.
Kent C. Dodds: Yeah, sure thing. Thank you.
Taylor Bell: Yeah, so I wanted to talk to you about your new course, about using Suspense to simplify async UI. Just to get started, what is Suspense?
Kent C. Dodds: Yeah, great question. Suspense is the ability for you as a user of React, developer of React, to tell React to that, hey, this component's not ready because the data that it needs hasn't loaded yet. And so, you can say, stop rendering this component and render it after I get my data for this component. And then, you can provide a way, a fallback UI while that is happening, while there's any suspending components, show this, instead.
Kent C. Dodds: And then, there are ways to handle errors and that kind of thing. But that's the whole idea behind Suspense; is allowing the developer the ability to tell React to stop rendering a particular component because something's not ready for it to render yet.
Taylor Bell: And why is that an exciting thing? I've seen Suspense written everywhere, and you've just explained what it is, but why is it such a game changer?
Kent C. Dodds: Yeah, that's a great question. There's so much code in pretty much every application dealing with asynchrony. And so many bugs come from thinking about how data is changing over time, and just thinking about temporal issues in general. You can render this now and then when the user's made a few changes in the future, then you try to render it again, and it doesn't work right or something.
Kent C. Dodds: And so, asynchrony in UI has always been a problem. And so, having Suspense make that asynchrony and just thinking about time just go away, it drastically simplifies the code. And then, on the other side of it, there are things that are built into Suspense and built into React with concurrent mode that make you, not only not have to think about time, but also improve the user experience as well.
Kent C. Dodds: So the loading states that you present to the user can be a way, way better. You can coordinate loading states, which is actually a really difficult problem without something like Suspense. So instead of showing the user 12 loading spinners when they hit your page and having things load in place and pop around all over the place, you can maybe just show one, and then have things pop in in a more defined order to make it... And at the end of the day, you get a better perceived performance for the user.
Kent C. Dodds: What's cool is the React team has been researching this stuff for years, and they've been using Facebook as their test bed for all of this stuff. And so, what we're getting, even though currently it's experimental, what we're getting is actually really solid because it's based off of that year's experience.
Taylor Bell: Cool. And so, can you walk through the material you cover in this course?
Kent C. Dodds: Yeah, sure. It's an 18 lesson course, and two of those lessons are the intro and the outro, to give me an opportunity to tell you how experimental this stuff all is because it is just total fresh stuff. It's not actually released stable yet. So I just really want people to understand this is very likely that some of these things will change, but the concepts that you're learning are absolutely worthwhile.
Kent C. Dodds: But yeah, so we have 16 actual lessons on the material, and we're going to talk about enabling concurrent mode and why that's useful.With the new create route API. We talk about data fetching, and what we're going to do is actually refactor some traditional data fetching with Use Effect to Suspense. So you can get an idea of how the old way was done, especially if you're used to doing it the old way, and compare that to the new way with Suspense.
Kent C. Dodds: And then, the Suspense APIs are actually super duper low level. And so, because of that, they're not exactly ergonomic, and it's easy to shoot yourself in the foot, which is actually one of the reasons why I think they're going to try and make some changes to help alleviate some of that pain. But we're going to build a little abstraction to alleviate some of that pain ourselves. And so, we'll go through creating that abstraction that we'll use for the whole course for this resource factory things so that you can interact with asynchronous stuff; whether that is fetching data from an end point, which is what we're doing, or if you're getting Bluetooth data or if you're getting geolocation, whatever asynchronous thing, this little abstraction will help you do that.
Kent C. Dodds: And we build it from total built for a specific use case, and then we build it into a generic abstraction from there. So you get a really good idea of what's going on inside of there, which I think is a great way to learn these kinds of things. And yeah, then we get into some of the positioning of Suspense and error boundaries, which is a really important topic. We talk about use transition as a mechanism for having a lot more fine grain control over the loading state for our users, and avoiding the flash of loading state. If, let's say, you show your loading state after 200 milliseconds, and then the data loads in 250 milliseconds, well, then for 50 milliseconds, the user's going to see a loading state and that, to the user, just appears as a flash.
Kent C. Dodds: And based on the research from the React team, that flash actually makes the user perceive your application to be slower. And so, instead, what we can do is if we're going to show a loading state, we'll show it for at least 200 or 300 milliseconds. And even though it actually takes longer for the user to actually see the content that they're trying to load, they still perceive it as being faster because there's no flash.
Kent C. Dodds: So we look into how you can use Use Transition, that new hook in React, to control this type of loading state and loading experience. And it's actually a lot easier. I actually implemented that exact thing when I was doing Angular JS stuff. I just basically made every single interaction take at least 300 milliseconds to accomplish that. And this is even better because if it takes less than a certain amount of time, then it won't show any loading state at all, which is awesome.
Kent C. Dodds: So I adopted into: let's just always show a loading state, and with the tools that React gives us, you can show a loading state conditionally based on the time. So it's really cool and it's quite easy to use. I'm really happy with that. And when we get into caching resources... Also images are notoriously a problem on the web because there is some asynchrony going on there, but there's not really a good way to control it. And so, we show how you can make a custom suspending image component.
Kent C. Dodds: And I also teach about how the browser cache works with images and we leverage that for some of this, which is interesting. And we do some eager loading of images so that we push the waterfall of requests over to the left as far as possible, so things load quite a bit faster, which is pretty cool.
Kent C. Dodds: And then, there's a pattern in Suspense that has taken Twitter by storm, and it's in the documentation where they show three different approaches to loading data. First is fetch on render. When you render, then you make the fetch call, that's what most people are doing with their Use Effects or the componentDidMount, or there is a fetch and then render; so let's go get the data. Once we have the data then we can render stuff. And that can be problematic if the stuff you're rendering is a lazy loaded component; Okay, let's go get the data. And then, now that we have the data, and now let's go fetch the code. But we could actually do both of those at the same time. And that's what Suspense enables in a really nice way with this render as you fetch model; that I will demonstrate all three of those and demonstrate why render as you fetch is a better approach and why the React team is so hot on it right now.
Kent C. Dodds: And then, we get into making a custom hook that is Suspense-full. And then, we talk about Suspense List, and there are some workarounds that we're going to work into with Suspense List as well. So there's tons of stuff in there, and I am in love with all of it. I think it's awesome and I think you will, too.
Taylor Bell: Well, that sounds like the best way to end this possible. No, that's awesome. Thanks so much, Kent, for meeting today and I'm looking forward to checking out the material. I know that you'll keep us updated as Suspense continues to evolve.
Kent C. Dodds: Yeah, you better believe it, man.
Taylor Bell: All right, cool. Thanks Kent. We'll talk to you next time.
Kent C. Dodds: Okay, thanks.