Introduction

[00:00:00]
>> Hi, my name is Steve. I am the head of frontend engineering at Temporal. We are going to talk about React performance. And performance is a multifaceted thing to talk about, right? Cuz even if you were trying to make a React app performant, there are other things that are React adjacent to the performance of your React application, right?

[00:00:25]
For instance, if you follow every piece of advice in this talk and it's not on a CDN, there's pieces there, right? There are other pieces to performance. So this talk we're gonna focus mostly on what that means in terms of a React application. And I think it's super exciting cuz along the way, you kind of learn a little bit more about how React works.

[00:00:48]
So we'll kinda get into what we're gonna talk about and go over today. I do wanna point out that there are, not one, not two, but five repos. Because, coming up with example apps that highlight every different thing you wanna talk about, doing that one app, turns out is difficult.

[00:01:06]
During five apps, it's not as easy to cover those but then you have five apps. So, I will put these here now, for people who are tuning in live, they are in the chat. For those of you watching later, there are probably someways convenient below or next to this video that you're watching.

[00:01:23]
But yes, I would right now kind of we will start, they are effectively in chronological order, so no pressure. But we'll do a few little challenges and spelunking adventures with the React Developer Tools, solve different kinds of problems and different challenges. One of them I've just hidden the slow part in various places, you can go suss it out and figure out how to solve for it.

[00:01:49]
And so, yeah, we have some practical examples that we can work through in our time together. So let's kinda just level set and talk about what are we gonna talk about in this course and who is it for, and stuff along those lines. Basically, if you're looking for more insight to actually how React does the thing, right?

[00:02:07]
You're like, I heard something, something virtual dom, right, or something along those lines. In the effort to understand how we can either, A, help the performance of a React applications or B, accidentally hurt the performance of our React applications, right? We are accidentally going to have to learn how React reacts, right?

[00:02:30]
And then, along the way, the kind of core thing is building a tool set for diagnosing performance issues in React. React is decently fast out of the box, one of the things I will say is that a lot of the applications we are going to use are simplified versions, right?

[00:02:49]
Sometimes I had to put an intentionally slow pace. I'm like, all right, let's put 10,000 rows on the page, right? Most performance issues are usually the accumulation of a bunch of tiny things that happened over three, six months a year, none of them in and of themselves are maybe the one big thing.

[00:03:08]
It is possible to do one big terrible thing that slows down your app, but you usually find that out pretty quickly. And there's who made the last commit to main and you kinda reverse engineer from there. I think what is more interesting and probably more practical is the, hey, when we did get init in whatever, everything was great.

[00:03:29]
18 months in, and now we're like, you start the jokes about how you're gonna jokingly rewrite the app. And then eventually the jokes become a not joke thing, right? And so this is to stop you from that thing cuz everyone thinks that's a good idea in the beginning.

[00:03:43]
I've done it more than once, it's never a good idea. And then, I think probably the piece that I'm most excited about, is as we walk towards those first two bullets, looking at how to follow React best practices, understanding why they are what they are, right? So you ideally don't get yourself into the situation where you have this increasingly burdensome amount of bugs you have to find.

[00:04:15]
The nice part about solving these performance issues is the techniques that we're gonna see on these relatively small example apps that are clear and to the point. Those techniques are the same ones that you use when it's a big tangled mess of performance bugs. Solving is just applying it repeatedly.

[00:04:35]
It's kinda like untying a big knot, right? You just start pulling out the threads with the technique you know how to do. And that is definitely a running theme around here. Generally speaking, there are kind of three major topics, about three or four major ways that you can solve for performance issues in React.

[00:04:57]
So what do we learn? We're gonna learn about all the caching and memorizing stuff that you see, particularly the moment you go React performance into Google. And you see these blog posts that are like, throw React memo on everything, right? That's not a good idea. And the nice part is we will understand what the tradeoffs are at that point.

[00:05:21]
It is a tool that sometimes you need to use and sometimes it is the right choice. But the second bullet of the way that you structure your components and the way that you structure your state sometimes can actually eliminate the performance problem without having to use, I'm gonna cache this and memoize that.

[00:05:39]
Because one of the themes, I have a slide dedicated to Steve's Golden Rule performance. I'll do a spoiler now, which is that not doing stuff is faster than doing stuff, right? And there's corollaries to that, which is doing stuff later is better than doing it now. These works for both life as well as performance, by the way.

[00:05:59]
But the act of checking to see if something's in the cache or memorized, that is a thing, right? And so yes, if it saves you more work than rendering an expensive tree, totally. At the same time, if you structure your code where you don't have to check, well, that's way faster, right?

[00:06:14]
And so we'll talk about how you can actually not have to use the kinda common performance tools and get better performance than having to use them. And then React 18 brought a bunch of new concurrency features, and for the weapons grade performance problem that you really need to solve for.

[00:06:33]
And we'll take a look at those brand new concurrency features in React and how to use them and when they're appropriate. They are definitely the, like, okay, I have a very bespoke special issue that no amount of rearranging my components is gonna solve. You now have some really great tools for solving that.

[00:06:52]
This is the last slide in the deck, it's also the fourth or fifth slide or whatever, the fifth slide. But it's also the 48th slide as well, and so kinda just give you a preview of the end, and where we end at the end of this whole story together.

[00:07:08]
Which is the kind of hierarchy that you should follow when solving a performance problem in React, right? One is if you can just structure your components and state in a way that eases the problem, well, that's good because you're not like, other than rearranging your code, you're not doing the memoization and caching, those extra checks, right?

[00:07:28]
So that is inherently gonna be faster, right? And like caching and memoization are solid strategies but not only do they have a hopefully smaller cost than rendering that entire part of the tree, but if you mess up caching, you can have weird bugs, right? So it's like, you have to hope that the medicine is better than the disease sometimes, right?

[00:07:53]
As I say in, what are the only two hard problems in computer science? Are naming things, cache invalidation off by one errors, all right? As somebody who had to name a bunch of projects, I definitely feel number one as somebody who has been bitten by the caching memoization bugs.

[00:08:08]
I understand number two as well. Then we have some of the newer APIs in React. Suspense is a set of APIs. Really there's about one of them that you can use currently, which is the idea of lazy loading components. Stuff like lazily doing data fetching is only available if you use a highly opinionated framework like next, or remix, or something along those lines.

[00:08:32]
So we'll just cover the ones that are generally applicable to React apps today, which is loading components lazily, who doesn't like doing stuff lazily? And then lastly, we'll talk a little bit about the transition API which is brand new to React 18. And how and when and why you might use it as well as, how exactly it works, and all those things.

[00:08:55]
So that's kinda where we end up.