This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Profiling React" Lesson
[00:00:02]
>> Speaker 1: When you profile an application, is there any specific way you go about doing it or is specific to react that will help or do you just go do the performance tab and-
>> Brian Holt: It's exactly what I was gonna pull up right now. So they used to have these things called React performance tools which broke with fiber, the React 16, cuz they rearchitected totally how React works.
[00:00:29] And that now they basically tell you is like if you have problems, you need to go to the perf tab. Here we go. Let's make this false too. So that's really annoying.
>> Brian Holt: So what I would do now if I was gonna do React profiling, I would go to the performance tab here and Firefox.
[00:00:49] And I would start recording performance, you can do this with Chrome as well it works almost the same way. Okay, refresh and now that it's rendered I'm gonna say stop here. And I'm going to look at, let's make this a little bit bigger, top to bottom, and I really only care about this stuff right there, so I'd zoom into that.
[00:01:17]
>> Brian Holt: Maybe make that a little bit smaller so that I can see what's going on here. And you can see all of the stuff going in here. You can see the recalculate styles, the script tag, the DOM events. And then going in here to,
>> Brian Holt: Yeah just going through and go through all of these various things to kind of see, we have no performance problems here.
[00:01:40] So this is not super interesting to look at, but you look for these kind of things right here, and then you click on the JS FlameChart. This is probably the part that's gonna be the most useful to you. You can see where you'r spending time. And I actually wanna maybe make this a little bit smaller so I can see some of these, where it's really diving deep in here.
[00:02:05] So you can kinda click in here and you can see what part of your application is causing the slowdown. Like here, you can see that this is where React is doing the re-renders. This is the workloop. Then it performs a unit of work which is how the new fiber architecture works.
[00:02:19] And you can see that it has this kinda bit of a fine graph. But if you have a large application, it's gonna be way deeper.