Performance Problems & Tools

[00:00:00]
>> Steve Kinney: I want to introduce maybe two very broad, very hand-wavy categorizations for performance issues in your application, right? Because they are both equally as problematic, but very different in their nature, right? And so kind of giving us the distinction early on, I think is super important. One is the big thing that is slowing down your application, like that one bottleneck. You open up those Chrome developer tools and you see it, right?

[00:00:33]
You feel it in the app, you know where it is. You're probably even thinking of a place in your app right now where you know that if it is not presently there, it is slowly growing and emerging. And these are interesting because on one hand, they are very noticeable, clear and present danger, right? On the other hand, it is like, remove the thorn out of your side and it is gone, right? And that's both terrifying and also somewhat relieving to know that you can just figure out how to solve that one issue.

[00:01:09]
And that is going to be a thing that we definitely focus on today. Like, I would argue that some of the concepts towards the end of the workshop, right, are very focused on that, like, you have this one specific pain point. And these are some of the ones where I would say in something like React 16 or 15 or what have you, it was kind of terra incognita about how one would even solve that. You might have to kind of hit the escape hatch, grab a ref, and maybe go back to vanilla JavaScripting it for a second.

[00:01:41]
But now, some of the biggest, gnarliest problems of like three, four years ago, two years ago, will be shockingly simple to fix, right? Sometimes it'll only involve a few lines of code where a few years ago it would involve possibly a month of your life you'd never get back. The interesting part with some of these techniques with the new features in React 18 and 19, like transitions and React Fiber and stuff along those lines, is it is very easy to, especially if you've been doing React for a long time, that they might have just kind of snuck in there and you didn't even know that these magic wands that make large problems go away are just there and you can actually solve them with like five lines of code.

[00:02:27]
Or things like optimistic updates, which are not easy. If you're still doing stuff like, all right, I'm going to set state with an error state and a loading state, those will be Booleans, I'm going to flip those on and off, and then when the promise resolves, I'm going to flip this one and if it catches them. There are easier ways, right? And it's very easy if you've been doing it for years to be like, this is the way I've always done it.

[00:02:48]
I heard those APIs exist. I don't really know what they are. This is the way I do it. Let's take some time, we'll explore them, and you'll be like, wow, that was worth it, because that's how I felt, and so I'm projecting. So we've got the big ones and the big gnarly things. And then there's a more insidious kind of performance problem, which is like the slow accumulation of little things that begin to slow everything down.

[00:03:19]
And on one hand, no one of these, I particularly like, this is a unique problem I've never seen before. It is like a series of death by a thousand cuts, right? And these are the interesting ones because there is a lot of literature out there written by people who I can tell from their job descriptions are talking about writing code a lot more than you're doing it, right? And there are things like, well, only optimize if you have a problem, which is true.

[00:03:46]
Over-optimization is bad and premature and like you're not getting anything done because you're designing the perfect system is bad. But also, it's like, we all know that sometimes prevention is the best medicine because like, let's say it's a thousand of these small things, and it's going to be, we know every step of the refactor, but it's going to take a month. Like, we know how easy that is to get signed off by leadership or product managers or stuff along those lines, where it is easier said than done, right?

[00:04:21]
And so like, figuring out what the things are early and often, so both we, when we write our code, and then also when we're code reviewing each other's code and kind of see the things early on to prevent the accumulation as we go through. So they're very different kinds of problems, like the big one is clear and present, and you need to deal with it because the whole thing doesn't load. This is ones where it's like, I go to a given UI for a place I used to work, and the page took, I measured it, two minutes to load, right?

[00:04:53]
And I knew enough about what was going on to know exactly how it got there and exactly how impossible it was going to be to unwind. These are both legitimate dangers and things that we can, you know, at least somewhat prevent, right? Like there will always be the, like, a whole bunch of things come together in the perfect way, and you're like, despite everyone's best intention, right, we ended up here, that happens.

[00:05:20]
There'll be some things that maybe you can't fix, right? It's like, oh, if only we had a better API where we didn't have to make ten API calls to get the complete user model, and everyone agrees that we should definitely get that better API, and it's been four years. Those are all things, and then how do we navigate that and how do we deal with that? Those are all unique things that despite a blog post on a thing, right, it happened no matter what.

[00:05:49]
Some tools that we're going to use as we talk is one, the React developer tools, which is a Chrome extension that hooks into the Chrome developer tools, and, you know, they become good friends, and you can kind of use them together to see things. What I really like about the React developer tools is there are features that will kind of flash whenever a component is re-rendering, and that's a great sign, even early on, even if it's like everything feels great.

[00:06:17]
But you can kind of begin to see things are flashing that shouldn't be flashing, right? That should not be re-rendering, right, as we're going through. And sometimes that is simply just refactoring how you manage your state, right? Sometimes that is making a few small changes to the architecture, how you use the Context API, right? And those things are both good for performance and good for you, right?

[00:06:43]
Just to be able to maintain that codebase over time. And there's also ways to kind of see what is taking a long time both in terms of the Chrome developer tools and just raw JavaScript as well as with just in terms of the actual components and stuff along those lines. So, useful tool, do you need it? I don't know. No. Do you want it? Probably, right? So I would go get that and I, you know, I'm working under the assumption that it will work equally as well for Edge and Firefox and for Safari.

[00:00:00]
I don't know. So, go ahead and get yourself that while I kind of do the philosophical part of the show, and that way you'll have it ready and installed when we get to that piece.