Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Optimization
Loading...
Loading...
Complete source code for this lesson is available at
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 Now, I taught you a lot of things so far on the journey of building this Dev Overflow application.
00:00:08 One of the things I taught you is that not every request has to be sequential, meaning that it has to happen after another request.
00:00:17 And this right here is a textbook example of sequential requests.
00:00:23 We have one single await, which completely blocks the execution of the next one.
00:00:28 And then we have another await, which blocks the rendering.
00:00:31 So, considering that these requests don't depend on one another, meaning that we don't have to fetch some data from this one to be able to pass it to this one,
00:00:40 that means that we can run those requests in parallel.
00:00:43 So let me show you how to do that to improve performance.
00:00:47 The only thing you have to do is use a promise.all.
00:00:52 So say const, the structure, the array, and then make it equal to an await promise.all call, to which you need to pass an array of the functions you want
00:01:03 to call.
00:01:04 So at the same time, we'll call both the get hot questions as well as the get top tags.
00:01:12 So since we're calling them, we also have to destructure the values that they're going to return.
00:01:18 First, we have the success data and error from the first one, and then we have the success error and the data from the second one.
00:01:26 So copy and paste them there, remove the sequential requests, save it, and go back.
00:01:33 You'll see that everything still works exactly the same.
00:01:36 Now, you might also want to test the error handling of this solution to see that everything will work well with the questions,
00:01:41 for example, even though the tags throws an error.
00:01:44 So let's head over into the tag.actions.ts and let's throw an early error.
00:01:50 Right here at the top of the try, I'll say throw new error.
00:01:54 This is done on purpose.
00:01:57 Let's see what it says.
00:01:58 So as you can see.
00:02:00 The top questions renders properly while the popular tags shows this huge error.
00:02:05 And if you don't want to show this retry request button, we can be a bit more realistic and say something like error, head over into the data renderer
00:02:13 where we show tags, head into the data renderer, and at the bottom, change default error.button to something like empty.button.
00:02:21 Now it won't appear right here and it looks much better.
00:02:24 Still, we don't want to throw errors on purpose.
00:02:27 So if I head back to the tag action, I will remove this error.
00:02:31 And one more time, admire our right sidebar in which we're now making two parallel requests.
00:02:37 Pretty cool, right?
00:02:38 Not only have you implemented a nice fully functional sidebar, but you have also learned an important optimization technique when making multiple calls.
00:02:47 Great work.
