‫We have used the React developer tools
‫all the time throughout this course,
‫but actually, we have only used half of them until now.
‫And so let's now meet the other half, which is the profiler.
‫So, for the first half of this section,
‫let's actually bring back our Atomic Blog project.
‫So let's open that up in VS code,
‫And so I'm here in the app.js file,
‫so the latest file that we wrote.
‫So let's close that and let's npm start it.
‫Okay, there it is.
‫And so let's actually make this window a bit bigger,
‫so that we can actually see our developer tools.
‫So, as I mentioned in the beginning,
‫we have used the components React developer tool a lot,
‫but we have never used the other part.
‫So this profiler right here.
‫So with the profiler,
‫we can basically analyze renders and re-renders.
‫So we can see which components have rendered,
‫see why they're rendered,
‫and also how long each render took.
‫Now in practice, we use the profiler
‫by clicking here on this record button,
‫and then we update some state.
‫But before we go do that, let's change the settings here.
‫And coming to this last tab, which says "profiler,"
‫and then here we want to activate a setting,
‫which says that it should record why each component rendered
‫while it was profiling.
‫And so basically, this will give us one of the three reasons
‫that we talked about in the previous lecture,
‫of why each component has re-rendered.
‫So whether it was a state update, a context update,
‫or a parent re-rendering.
‫All right?
‫Now, if you reload the page, then you will have to
‫reset that setting, actually, which is a bit annoying.
‫But anyway, now I will start recording,
‫and then I will update the state of the page
‫by typing in here.
‫So let's type three times,
‫so we see how that actually looks like in the profiler,
‫and then we click there to stop the recording.
‫And then here is our flamegraph.
‫So, we can see the result in the flamegraph,
‫and here in this ranked graph.
‫So starting with the flamegraph,
‫this is basically just another way
‫of representing the componentry.
‫So as the parent, we have app, then we have our provider,
‫and inside the provider we have, indeed,
‫the header and the main, which in turn,
‫contain all of these components.
‫So just like we have here.
‫Now, what's special about this
‫is that some components are actually colored
‫and some are gray.
‫So the gray components are the ones that did
‫actually not render while the application re-rendered.
‫So main posts and app did not re-render,
‫but all these others did.
‫And the more yellow the color is,
‫the longer it took to re-render.
‫So the PostProvider, we can see, took the longest.
‫Now, in order to rank them, we can, as the name says,
‫use the Ranked tab here.
‫And so here, we can then very clearly see, for example,
‫that some of these components
‫were really, really fast to render,
‫while this one here took a bit longer.
‫And even though that's less than a millisecond,
‫which is really nothing.
‫Now, thanks to the setting that we activated
‫in the beginning,
‫we can also see why each of the components re-rendered.
‫So here, for example, we can see
‫that the PostProvider re-rendered because Hook 2 changed.
‫And so the Hook 2 is simply the use date hook,
‫which is storing this search query here.
‫So then here, the provider usually doesn't say,
‫and then here the header re-rendered
‫because context changed.
‫So let's check that out, actually, here.
‫So indeed, the header is consuming the context,
‫and so therefore it changed
‫as we updated the state here in the context, right?
‫And the results, and this form, and the list,
‫all of them are consuming the context.
‫And so therefore, they then also updated
‫as the component was updated
‫while the main and the post components
‫are not consuming the context,
‫and so they did not re-render.
‫So this is how we can basically analyze this flamegraph.
‫Now up here, we have the different commits,
‫how they are called,
‫or in other words, each of them here is one re-render.
‫So I think that's easier to understand.
‫And so since we did three times the same thing here,
‫we should expect them to look basically the same.
‫Now, the timings have changed here for some reason,
‫but the components that have actually rendered
‫and not rendered are exactly the same.
‫All right?
‫And now let's try something else.
‫So for that, we can clear and then record again.
‫And now let's simply click here
‫on this fake dark mode button.
‫So just one re-render,
‫and so then here we only get this one column.
‫And so this time, as we can see here, every single component
‫has re-rendered, which makes sense because this date update
‫actually happened right here
‫in the main parent component.
‫So, here in the app component.
‫That's why here it says that hook number one changed,
‫which is this one.
‫And then we can see here, for example,
‫this one did render because the context changes, or changed,
‫which actually seems a bit strange,
‫but we will come back to this later,
‫so we will understand why React is saying this.
‫So all the components that are consuming the state
‫actually are telling us that they have re-rendered
‫because the context has changed,
‫while these two,
‫which before were gray, are now also colored,
‫and these two did re-render,
‫because the parent component rendered.
‫And so again, when the parent component of the application,
‫so the component at the top of the componentry, re-renders,
‫then all the child components will re-render, as well.
‫Okay, let's just put this back.
‫Let's delete, and let's try another one.
‫So one,
‫two, three,
‫and four.
‫So, let's see.
‫And indeed, here we have,
‫or four state updates,
‫or four re-renders.
‫So, in the first three we can see
‫that only the form at post re-rendered.
‫And so, that is, well, let's see where that is.
‫So, that is because these are local pieces of state,
‫and also this component has no child components.
‫And so, then only this one re-rendered
‫the three times that we wrote something there.
‫But then, here we have a similar picture
‫to what we had before.
‫So not all the components have re-rendered here,
‫like the footer, and the main component did not re-render
‫as a result of adding a new post.
‫Okay?
‫So feel free to play around
‫with this new tool here as much as you'd like,
‫as this will be pretty important throughout this section,
‫and also later,
‫once you start building bigger and more heavy applications,
‫which might require some performance optimization.
‫So, we will use this tool throughout this section,
‫and so make sure that you play around, again,
‫with this a bit more.
‫And then let's move on to the next lecture
‫to talk about our first small optimization trick.