00:00 Hello and welcome to the React Performance Workshop. I'm Kent C. Dodds and I am excited to take you through this whirlwind tour of a bunch of different things that you have at your disposal to optimize things for performance. Before I get into showing you what we have to look forward to, I just want to like emphasize

00:17 and I do this a bunch of times, but I want to emphasize that you need to learn how to measure your performance and only implement performance optimizations when the measurement demonstrates that it actually is necessary and that it actually is improving performance. Sometimes people will implement a performance optimization assuming that it's going to make

00:36 things better and it actually makes things worse. So you do need to learn how to measure things properly. And that's what we're doing in this workshop. It's going to be so sick. And then on top of that, of course, we're going to show you how to improve things. So how to measure it and how to improve it. So here's one of the examples. We've got a bunch of different components here and we're going to measure their rendering.

00:56 So we have like all these different state interactions and we'll take a look at each one of those state changes and get it down to just the components that actually need to re-render when those interactions happen using a bunch of different methods.

01:09 It'll be really, really cool context and composition and memoization, super, super cool stuff. And then we also are coming back to this example and we're going to pretend that these cards are really, really expensive to render, makes the experience really, really bad.

01:27 But we'll keep the typing totally responsive and it will feel like a fast experience, even though parts of this application are really quite slow. And like it is, it's wild. Check this out. I'll slow this down to 6x.

01:44 We'll do this and then cut that out and type another thing and cut that out and then stop. And this is just the coolest view. So here's when all of that stuff was going on when I removed cat and it's all just sliced up so perfectly, giving the browser time to be responsive to my keyboard input.

02:02 I just think this is one of the coolest things you're going to see. And then also we have lazy loading of code, this code splitting. So if I slow this down to a slow 3G network connection and say that I've never loaded this globe before, as soon as I hover over it, we started loading the globe and all of

02:22 the other dependencies. We've got this pending UI that's showing and when it's finally loaded, we can actually render the globe. But the important part is this globe is like an enormous amount of JavaScript that we need to load and we don't want to show it until the user wants to show the globe.

02:40 And we also talk about how you can eagerly load that and all of that. It's going to be really, really cool. It'll just make your application load a lot faster. And then finally, we're going to just maximize the performance optimization possibilities like to the max for this list of items.

02:57 Like there's like tens of thousands of cities in here and the scrolling is just so smooth and fast. The typing and searching for this is super fast. Look, I could even SLC that Salt Lake City. How cool is that? I think that is so cool.

03:12 So we've got some intelligent filtering that's going to take a lot of time for so much data. We shove that over into a special worker thread so that it doesn't lock up the main thread. And then on top of that, we add a bunch of optimizations with memoization and virtualization.

03:29 So even at a 6x slowdown, performing all of these state changes and things doesn't result in a really terrible performance profile. And you don't end up rendering way more components that you need to for every one of the interactions that you have.

03:46 It's just like here are a couple of components that needed to re-render because of the change that took place. I think that this is super cool that we have all of these tools at our disposal. Now remember, these tools are really useful, but they do add some complexity to your code.

04:03 And so you want to weigh the complexity that it adds against the performance improvements that you get. And that's why I'm teaching you how to measure the performance improvements so that you can make sure that you're actually improving things. And on top of that, the React team is constantly working on different ways to make things faster

04:22 by default. And in the future, there could be even better optimizations. I'll add any notes about those to the notes of the material that you're going to be going through. And I'm just really looking forward to going through all of this awesome stuff with you. Can't wait to get started. So let's not wait. Let's go right now.