Road to a Better UX with Suspense and Concurrent UI

Hey everyone! So today, I'm actually going to be discussing how we can take UX to the next level with React Suspense and Concurrent mode. So before starting, for the ones who don't know me, hey, I'm Nikhil, I'm a software engineer at Postman. I actually handle stuff around design systems, Postman on the web, and Postman as a platform. You can actually find me on Twitter, on Github. I actually love to talk about design systems, and performance in general, so come say hi, it's actually going to be a great chat.

So before diving in, let's cover what are going to be the key takeaways of this lightning So in this talk, we are actually going to discuss how we can actually have more control over the loading area, which means how we can actually control where exactly do we want to show a loading shape. Is it going to be the whole page, or can we actually control loading on the UI that's going to be asynchronous with the API called Suspense? Secondly, we are going to see how we can start prefetching our data or our screens in background while we are right now in some other screen with the magic of concurrent mode. And thirdly, we'll actually see how we can actually reduce that janky spinner Nudra experience with actually the users for our faster connections actually face with a loading indicator which just comes and goes in a flash for them using a hook called use transition. Okay, so with that being said, let's actually deep dive and thread this road to a great UX together.

So I'll actually switch to a small demo of a Twitter dashboard that I actually have here, right? So this dashboard actually shows me a profile section where it shows my name, my designation, it has a small about me section, which actually displays a small description around me and the work that I've done. And there's a tweet section which actually just shows what is that then treat that I put it. Just don't try to go check the Twitter. It's just something that I couldn't write. So and there's an extra button, which I click and then I just see another tweet. Okay, so far, so good. Now, let me actually just go and switch to concurrent mode on version of this app. And they just see how we can actually improve the UX right now. So let me just refresh and I go to this about me section. And if you see I have this nice big loader on my whole tab. And because of like, even if I have just small content inside my tab, which is my description, which was like asynchronous, but I'm actually loading my whole tab, and I'm actually showing a screen up for this whole section, which is actually not a great user experience. Right? I could actually rendered my static content as regardless of the fact that my description is running or not right. So moving on to how it is right now coded, let's actually see how we are actually written this up in our code. So we have a suspense block inside this block, I have some static content as a small div. So what if I could actually take this particular div out and render this inside, outside the suspense block, right? And this is actually how suspense actually gives you a fine grain control by defining a small sort of a boundary, and it lets you control over what exactly do you want to show your loading upon. So let's say this, I refresh this app, I go to my about me section, and now my static content is already there for my users to interact with while my description was loading. Okay, so, so far so good and it's simple. Now, let's actually try to uncover and see how concurrent mode can actually help us in removing some of those more loaders, right? So on the left side, we actually have a synchronous synchronous mode of that app. And we actually, right now, fetch stuff while we are going to a screen, right? So in the left, and I click on this about me section, I see a nice loader, and then I start loading that stuff right. And, but since concurrent mode is something which switches tasks or into priority, I can actually start fetching my description and my tweets, actually, when I am right now on the profile page, and I can actually start rendering things in parallel, while I'm on this profile. So what do you think that what would happen if I just go to about me section and I just click on this, would I see a loader? Let's actually find out.

So I click on this, no loader, no spinner, it just appears that it was actually right now there, right? I click on this tweet section, but on this left-hand side, I click on this and it now starts to fetch stuff while I'm now on the stream, right?

Okay, so two spinners have now been mitigated. Okay, now let's start to actually uncover another use case. So what happens when I click on this next tweet button? I actually see a loader and it just comes and goes, right? I just see it in a flash. And this is something that our faster connection users face, right? And the purpose of this loader is not defeated because the small milliseconds of time would be something that you would actually skip that loading state, right? And you would actually just let your stream be as it is rather than just showing the loader.

Now, let's actually try to remove this loader itself and use a code called UseTransition. So I have this component right here, which is TweetList and let me just comment out this line, which is called UseTransition. And what it actually asks me to give it is a timeout in milliseconds. Now what this actually means is React will actually skip my loading state if my data actually comes within these two seconds of time. So if I check this onclick logic of my button, right, this is actually the logic where I actually set my state and enable loading state with suspense. Now what if I could actually just take all of this I copy and use start transition which actually has a function and I copy and paste all of that stuff inside. Okay. And the start function actually takes care of all the stuff that if the data actually arrives within these two seconds of time just to the loading state. Now let's actually use this spending billion value which use transition gives us. So let's disable this button to actually see this. I save it. Now let's actually see how things happen in synchronous concurrent mode. Right. So I click on this tweet section. Now I'm seeing a loading sheet for the first time. Click on this button. It's synchronous mode and I'm right now seeing a loader which is not really good. So let's actually see what happens when I switch to concurrent mode. So with that huge transition hook, I can actually skip that loading state now. Right. So I click on this next week. I don't see a loader. Just stay on it as it is. And then the tweet appears in a flash. Let's actually see one more time. I click on this no loader and the tweet appears just like a flash.

And it seemed that it just all happened in an instant. Right. Okay. So far so good. And I think we have actually made some good improvement and progress in terms of a good UX. Right. So far so good. You guys are awesome.

Now you all might be tempted to think that, hey, this is a super cool API and let me just use suspense and concurrent mode and tell my managers and technical leads and, hey, let's use this API. It's awesome. And this is something that actually Facebook and React itself might not be in favor of right now because suspense or data fetching and concurrent mode are something that right now are experimental. And the Facebook team is right now still looking for more feedback since the API is still expected to evolve and can be error prone right now since it's experimental. So you might actually want to fiddle with these APIs in your personal side projects, but thinking of something that is enterprise is not something that you would actually want to do, right? Since things can be error prone.

On a side note, we are building great things at Postman. So if you actually like to be a part of our journey, please come say hi and visit us at our career's website. We'd like to connect and discuss things forward. So with this, I'd actually like to end my talk. A big thanks to all the organizers and the sponsors for who are actually working so hard to making this conference a great success and all the speakers and at the last but not the least, your audience. You guys, you guys are great at having actually great time discussing my thoughts with all of you.