React Performance Workshop 33 exercises
lesson

Outro to React Performance

Transcript

00:00 hey you did it you should feel really awesome about yourself i'm going to take you on a tour of what we've done so remember we had a 6x slowdown we record this and boom that interaction right there oh man it's so good it's so fast it looks amazing and we can scroll on for days

00:16 and it there's just so many bits of content in here i can go salt lake city and it's all coming from the the web worker work that we did the virtualization the memoization all of this is really fast we have all the tools at our disposal here's our threads we've got our filter cities

00:34 worker right there you'll notice actually if you refresh the page one of these is going to be coming from our worker and in fact lots of these requests come from the worker you see the little cog there so you you did it like there it is there's the worker that you created and that goes into our separate thread so so cool today i learned that this syntax is like i guess the

00:55 thing huh i didn't realize that you didn't need a space there i'll have to take a look at that later but so cool how fast we're able to make this experience despite the like serious requirements that we have on that piece of the product and then of course you remember our network request stuff

01:12 so i have no no cache here and as soon as i focus on this or actually i'm prefetching this like way earlier and we're able to load all of this stuff using suspense and lazy loading and

01:27 everything it's uh yeah way way cool uh super fast and we preserve the amount of javascript that we have on the page to only the stuff that we actually need on the page lazy loading all this stuff super duper awesome and then of course use deferred value to make this experience as fast

01:43 as it possibly can be and like keep it very responsive i just think that is the coolest thing now of course you always want to make your things render really fast but uh if you've gone as far as you can on that then use deferred value just really really makes things faster and it's not just for

02:00 oh the performance it's bad either um but uh use deferred value definitely helps with that time slicing that uh code splitting well yeah time slicing of uh the stuff that we're we're running which i just think is awesome and then all of the optimizations we did to avoid unnecessary

02:19 renders and all of these different interactions that we can perform where we're only rendering the components that absolutely need to be rendered based on the state changes that are being made we're moving elements around and and composing things in different ways so now you should have

02:34 a ton of tools in your tool belt for making your applications as fast as possible a final reminder that react is really fast and you don't need to reach for all these optimizations by default for everything that you're doing react can manage stuff pretty well by itself but now you have

02:54 the tools in your tool belt for the situations when you really do need to improve the performance of a particular interaction and i hope it's really helpful to you have a good time