Introduction

[00:00:00]
>> Steve Kinney: We're going to talk about React performance today, and this is a topic that is near and dear to my heart for a few reasons. One is like right now I'm working on like a Chrome extension, which is like code that runs in other people's like context. So like not being slow and blocking the main thread is uniquely important to me right now. But two, you know, this workshop is like the spiritual successor to one we used to do a while back, which was like advanced state management because years ago, really, the only way to like make React any more performant was to simply get the state management part right.

[00:00:42]
Now there are a whole bunch of things in React, right, that make it easier to like tackle stuff that might have otherwise been either unsolvable or solvable with like Herculean amount of effort, right? But there's, you know, it's still true that like how you manage like the structure and architecture of your application has big impacts on the performance of it, but also like the maintainability of it, and like your ability to reason about what's going on in your application, right?

[00:01:16]
And so it's very rare that like, what is both good for like your own ability to kind of keep a mental model of your application is also good for like the ones and zeros of rendering stuff, right? And those two things together, you don't get that all the time. And so I think like being able to both have stuff that makes your app more performant and it keeps you sane at the same time, who doesn't love that?

[00:01:41]
I like that. So what we're going to do is we'll talk a little bit about some of the conceptual pieces behind all that, mostly like to kind of like set the scene so we have context as we kind of look at some of the practical stuff, like some of the topics and, you know, and like concepts that we talked about in the very beginning are kind of like, you know, the old Chekhov's gun kind of thing. Like if, like, if someone gets like, uh, something happens the last chapter of a book, it better be like somewhat present in the beginning.

[00:02:10]
So we'll kind of do that and see how that all kind of comes together towards the end. So we'll talk about the conceptual pieces, then we will look at some of the kind of just normal kind of state management stuff. We'll look at memoization and things along those lines. Then we'll talk about like things coming up in React that might change some of those things or at least make parts of it easier for you and then kind of get into the newest, latest and greatest stuff within React.

[00:02:36]
So, you know, who is this for? It's for you, obviously. You know, if you're looking to like figure out exactly how does React do its thing, right, we will kind of like on that conceptual level, kind of go into what are the inner workings because they've changed over the years, right? If even if you're like, I know how React works when I learned it in like 2017, right? Like, you could have been using it every day since then and like some of the stuff like hasn't changed in terms of the ergonomics, but like, what is all going on under the hood has like dramatically changed.

[00:03:07]
I think like having that mental framework usually aids in just the day to day execution of things. You know, if you want to figure out how to diagnose performance issues, because, we're going to look at a bunch of small little labs today like in kind of isolation to kind of see these things, but like, at the same time, the best practices are very standard and the like ways that things can go sideways in your application tend to be very unique.

[00:03:39]
You know what I mean? And so like the ability to actually just like try to figure out what's going on is a skill in and of itself, and that we will kind of get a chance to look at as well. And part of what we're going to do is one thing to like find like that bottleneck and solve for it, right? But like, that is also somewhat reactive, right? Sometimes it is very nice not to have gotten there in the first place.

[00:04:08]
And it's a careful balance between like overengineering and premature optimization and not slowly but surely painting yourself into a corner that is going to take you six weeks to get out of, right? So we'll kind of talk about like, this is something you might consider, or there are times where it's just like that is not worth it, right? Like, and figuring out what the kind of heuristics there are, right?

[00:04:32]
And so like, if like, you know, questions come up or nuances come up, like definitely bring them up, let's talk about them because that's arguably the interesting part, right? And like, or there are real world examples that you have that we want to explore, and some of them we will be able to. Some of them are like, that would require like sitting with you for three days, staring at your like 10,000 file codebase.

[00:04:55]
And you know, we'll kind of, we'll navigate that together and we'll figure it out. But kind of those are some of the kind of core pieces. Dustin. Will these topics apply to Next.js or are they pretty much just React? For the majority of this, I kind of focused on like the client-side piece that is whether you're using Next.js or Remix or what have you, the kind of the pieces that like are agnostic to all of those, right?

[00:05:26]
Because a lot of times some of the like server-side pieces tend to be like framework specific and like, even some of the pieces of like building that are like for the library authors. So like, the main focus is like when it is running in the browser and obviously you can't not talk about like some server-side rendering stuff along those lines, APIs and all that kind of fun stuff, but like, while it is running in the client, what is it doing, right, is the kind of main focus, but like, obviously you can't not touch on those things in the current ecosystem as we go through.

[00:06:02]
Okay, so what are we going to cover? We are going to cover, like I said before, some of the state management pieces, a lot of the tools for caching and memoizing. It should be noted that some of that we are in kind of like an in between state where it's like, shouldn't React compiler make me not have to do that ever again? No, that's not necessarily true, like, but also like, you know, React compiler is still a release candidate at the time of this writing and like many things in React, if any of you were around for the great converting of all of your class components to functional components, the seven different state management libraries that you've used over the years, we all know that some of these migrations in our like large apps take a little bit longer than it just dropped yesterday allows for, so I still think it's like you may not be able to work in a green field, latest and greatest React app at all times.

[00:06:58]
So we'll kind of cover the concepts that are new. We will cover the concepts that are probably the lion's share of production code out there as well. The nice part is that many of the concepts in React 19 on this particular topic also apply to React 18, and stuff like the React compiler can go back, I think, as far as React 17 as well, and you can kind of use some of these things. So even if you are not on the newest version of React, like there might be one or two things that are not in there, right?

[00:07:30]
But like most of these concepts and the fundamental, you know, fundamental pieces are things that have been in the works inside of React internals, even if you haven't noticed them for honestly like three or four years at this point. And they might have only like come to the surface recently, but like the conceptual pieces and some of the like access to them can kind of be backwards ported as well.

[00:07:53]
Cool, and we will learn a bunch of the kind of cool new features in these modern versions of React. We'll learn all the stuff we get for free just by having a good architecture. It's going to be great. Like I said before, we have a bunch of specific labs that are kind of usually hyperfocused on like one specific aspect, right? Because one, I have introduced bugs before in my life. I have introduced performance bottlenecks in my life.

[00:08:21]
It is incredibly hard to make an app that has every possible performance bug in it on purpose. Right. That is harder to do than you would think, given how many we've all done by accident, but also so that like you're not sitting there going like, let me grok this codebase that would have taken me a month at work to grok. We have kind of small ones, which means we have to walk a fine line where some of them are somewhat simplistic versions of that, but they are like manifested from either like scar tissue or like riffing with people about terrible things they've seen at various points.

[00:08:56]
So they are inspired by true stories in most cases. And like I said, if there's a twist on that from your experience, like, if we can, right, if it's something that we can jump into, like, absolutely we will. Sometimes we're going to be like, uh, you know, we'll see, but let's try it.