Michael Chan explains what React Suspense is.
Suspense, the new experimental API that React gave us, helps you communicate transitions of state in your application in a really nice declarative way and organize your views so that they compose in a certain way.
Michael Chan tries to cover every step that a learner might have to go through when building an app with React Suspense in his egghead.io course Build an App With React Suspense. He will introduce code splitting, suspense boundaries and errors, and more!
"Build An App With React Suspense With Michael Chan" Transcript
Taylor Bell: Hey, Michael. Thanks so much for joining me.
Michael Chan: Yeah, of course. I'm happy to be here.
Taylor Bell: Awesome. So I just wanted to talk to you a little bit about Suspense. So in your words, what is suspense?
Michael Chan: Oh, man, so Suspense is this new experimental API that React gave us. It was announced this year and it's fully experimental, I guess, that that comes with, but it's really cool. I think the best way to describe it is it helps you communicate transitions of state in your application in a really nice declarative way and organize your views so that they almost compose in a certain way. We think about composition in terms of maybe a 2D rendering of something, but this is the way to think about that 2D rendering happening over time. So you have this piece of data and, boom, you place that here. Now how does it look for the rest of the pieces to be loading or if they fail, what does that look like and composing that over time? I think that's the problem that React is solving for us with Suspense.
Taylor Bell: Cool. And so if a developer asked, "How does learning this help me," what would you say?
Michael Chan: I think that we've had to deal with this problem for a really long time. So having different pieces of data coming from different end points, some being slow, some being fast and trying to make those all work together and look cohesive without overwhelming a page with spinners is something that we've had to do, but it's been pretty difficult. We've had to own a lot of that implementation and maybe it's very view specific so we have to do that on every page. And the new Suspense APIs allow us to abstract more of that away and make some more of that reusable in the same way that components and hooks kind of give us a way to make certain pieces of UI reusable. This is more like a composition tool for being able to extract even more of those kind of a loading states into reusable pieces.
Taylor Bell: Cool. So can you walk me through the journey that the learner will take in your course?
Michael Chan: So I try to cover every single step that we will go through in Suspense. So we start with something that you can absolutely use in React code today, so not experimental at all, which is just code splitting on components. And through that we introduce concept of Suspense, and error boundaries, and how to use them, and what do they mean and talking about how we're connecting our promises to Suspense boundaries and errors. And from there we just kind of build sequentially on each of those topics to say, "Okay, well now if we have this type of situation where we have used two pieces of data, one of them's slow, one of them's fast, how do we control which one shows up first? How do we control when the spinner shows up for the second one in relationship to the first [inaudible 00:03:08]?" And we just kind of want to go through each of those scenarios and just try to explore what it would look like from a code design standpoint to make each of these views behave the way that a user might expect.
Taylor Bell: Cool. And so after somebody's gone through all the material, what do you suggest they do next? How can they apply Suspense to their real life?
Michael Chan: I think that's a really good question because all of this stuff is experimental, as the React team says, I think that it is good to know. I think it's good to know how the future fits into your application and kind of start looking at some of those things. But this is really something that we're sorting out as a community so getting involved in kind of raising your pain points, if you're a library creator, exploring these APIs and creating some libraries that people can use to connect to data, whether that be a rest endpoint or a graph QL endpoint or anything like that. Just kind of solving your problem and seeing how that goes and how the APIs work for you is going to be critical information for the final form of these APIs.
Taylor Bell: Cool. Well, thanks so much for joining me and I'm excited to check out your course.
Michael Chan: Yeah, thanks for making all this happen. I'm super excited to work with you and others and learn these cool new features.