How to use the React Profiler to find and fix Performance Problems

so someone sent me a message that they were noticing some performance problems with their application after upgrading to the latest version of redux in that version they introduced hooks so he converted over his code to using redux hooks and then noticed some performance problems now I think he was able to figure them out but I figured this would be a great opportunity to look at the react profiler and show you guys how you can find performance problems in your application and then find the components that are causing them and then how we can go in and fix those so we're here here I have his application up and running and we're gonna do just that so this is application where there's some filters at the top here and then there's some cards that are being displayed so what we're going to do is we're going to do this checkbox right here or the switch this seems to be causing the most jank so when I click this there's a little bit of lag a little bit of jank and then it renders so that is the thing that we're going to be taking a look at and so to run the react profile there we're gonna right click inspect and if we go over to the react tab here this is where we're gonna use to react dev tools so you're gonna need those to be able to do this and it's a Chrome extension or Firefox so there's this tab here called profiler I think you have to have a recent version to react for this to show up all we can do is we can push this record button and we can start recording and then we can do an operation that we want to record like this and then I'm gonna hit stop and I actually I can actually see how long stuff took to render and whatnot so this bar at the top here is important I can use this to see all the different commits that happened and how long they took this one seemed to take the longest so we're gonna focus on this guy right here so this is what I usually do is pick the biggest one and go check that one out so here we can see this took 154 milliseconds and we can also see the breakdown of components and see how long each one of them took to render so we can see our main problem here is this cocktail browser so if I click on that I can see that took the 154 seconds and then I can even see and this is a component by the way and we can see that this is broken down into this had components that I was rendering so it was written during a cocktail filter in a cocktail list if we click on this we can see it was rendering a whole bunch of small components so we can see click and see even more information about it so it seemed to be that this was taking a while because it was rendering all these little items we can also see the number of total renders so we can see it took two renders we can click up here we can see how many times this rendered - it looks like - for each one of these guys and we can see the cocktail filter took 20 seconds or 20 milliseconds to load and we can see individual breakdown of stuff okay so now we kind of know what components are causing the problems let's start and focus on the cocktail list first and see what's going on there so if we take a look at the code we can open up the cocktail list page we can see the main component is getting is this cocktails list and it has some style some styling but the cocktails is these right here this list and you'll notice the list doesn't change whenever we hit this checkbox so really this shouldn't even be rendering when we flip this on and off and if we take a look at the component it just is not there's nothing stopping it from rear-end during every time that the cocktail browser re-renders over here and so when this rear Enders I think it is triggering that so what we can do is we can wrap this component and a memo so we can say react Dom then though and wrap that hit save and we can come back and we can see if this helped at all so we can go to our profiler I'm going to run it and then I'm going to switch this on and I'm gonna hit stop and so now we can see a breakdown of stuff we can see here there's a small bump here took 30 milliseconds you can click this took 38 milliseconds we can see in general we have brought down the load time quite a bit and this one is being the largest right now so we can see now we're memorizing this cocktail list looks like it only rear-ended once which is awesome and so this cocktail browser took a total of 40 milliseconds now so we really brought it down so we can crack down into each of these individual components and continue to kind of just recursively take a look at them and see if we can them to render less or to take less time so we can see now these are rendering a total of five times think each you know each commit is gonna have a different number of renders but this cocktail filter is another one that's rerender so this this is another one which it's not really needing to re-render so we can go into cocktail filter and we can take a look at it and we can see what it's doing in here so it is taking some classes it is using a selector and I'm not really seeing anything that would cause it to rerender we can try wrapping this with a react memo and see if that helps at all it may be causing rear Enders from the use selector the other thing I noticed is if we take a look at these get glasses and get categories we can see these are some functions that are doing some operations on the cocktails list so we can see they're getting the unique values and they are compacting them so these are some things where they could be intensive to run so we can memorize this so it is not running every time only when the all cocktails changes so this is something where we can introduce some a library like reselect or we can introduce a oops a use memo hook and that is just built into react now and we can just call get categories and we want this to change whenever all cocktails is called or whenever it changes and we can do the same thing with get glasses so use memo in front and now these are only going to recompute and do that computation whenever this changes so let's head back to our components looks like it refreshed profile start and start this off all right so we can click here we can see it's 31 milliseconds for this one we can click on this and we can see what's kind of causing this so we have five renders here you can see this is rendering a single time now this is rendering two times and this is rendering two times so maybe we could go in there and try to reduce the renders even more but this is basically the strategy I would use and a lot of times you may just be rendering a lot of content and you'll notice they are in this cocktail list there's a lot of stuff being rendered and that these are cases where you may want to go ahead and lazy load some information or not display at all at once and you can prevent some of the how long it's taking but we seem to have memorized this pretty well you can see how this one's doing over here 24 milliseconds we can go into this cocktail filter and see what's causing it to take so long so it's taking 30 milliseconds so this seems to be the bulk of what's causing this one to be so long now if we click and we can see the ingredient picker is taking 10 milliseconds doesn't really seem to be doing much inside of this it's not rendering any components we can go check it out so using a selector this is one where we Mabel Mabel to wrap a memo around it and see if we get any improvement out of that all right profile start stop and take a look look like it helped a little bit shaped off like maybe three milliseconds off this but that doesn't look like it's doing a whole lot there may be some computations inside of ingredient is taking a long time doesn't look like it but maybe this includes no but anyway this gives you an idea of how you can use the react profiler we don't have to get into all the nitpicky of how we can get this even less or more performant this gives you a good idea of how we can use the react profiler so in conclusion basically what I do is I will start the profiler do the operation that I want a profile and then I go and I see the largest thing that's taking the large largest amount of time and I just go and recursively break down where it's coming from okay cocktail browser is taking the longest time why is it taking the longest time I can see which components inside of it are and then we can go see well should this component be taking this much time if not what can I do about it but there you go I hope that was helpful and gives you a better understanding and how you can start using the profiler you

Channel: Ben Awad

Views: 154,196

Keywords: React, React Profiler, Performance Problems, fix Performance Problems, React Profiler to find and fix Performance Problems, How to use the React Profiler

Id: 00RoZflFE34

Length: 9min 36sec (576 seconds)

Published: Mon Jun 17 2019