How To Maximize Performance In Your React Apps

debugging a slow react application to fix performance problems is incredibly time consuming and difficult but if you use the right tools and you know how to use them correctly it can become incredibly easy that's why in this video I'm going to show you how to use these tools and actually understand what all this mess on the screen is saying [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and to get started I have a fairly complex project here that has a lot of stuff going on for example we have all this different sorting that we can do you'll notice when I click on certain things my page is really really slow that's what we're going to be fixing in this video these different performance problems you'll notice I can do a bunch of different things but again when I click on a lot of these buttons you'll notice there's a huge slowdown on this task board page which is obviously not ideal I have a job listings page which is blank for now I can view my own job listings if I'm logged in I can create listings and you'll notice some of these pages are quite Snappy to go to while other Pages such as this task board page are incredibly slow now this project is part of my react simplified course it's actually the final project in the entire course so if you're interested in checking that course out I'll have it linked down in the description for you I'm currently still finishing up this project so the course isn't quite ready yet but it should be ready rather soon so I'd recommend just going down clicking that link in the description and checking to see if it's available and if not you can just enter your email and I'll let you know as soon as the course is ready anyway though I noticed that this task board page is rather slow in I really want to fix this task board page and you'll notice that since all the Slowdown is on this page and all the other Pages seem to be rather quick compared to this one you'd think okay my problem is clearly with this task board page and if you were to look through the code you could spend forever looking through all the task board related code you'd never actually find the bug that's slowing it down because the bug that's slowing down my application really doesn't have anything to do at all with this task board page so the best way to find performance related bugs inside of react is to use the profiler which is part of the react Dev tools so if you have the react Dev tools installed and you inspect the page you should be able to see over here you can open up the profiler section and this gives you all of your different profiling related data now if you don't have the react Dev tools installed all you need to do is just go to whatever browser you want just search for react Dev tools extension and you can install it it's available for pretty much every single browser out there now if we want to start profiling our site to see what is slow all we need to do is just click onto this blue button that's going to start profiling or you can click this reload and start profiling and that'll give you essentially your first page load and it will include that as part of your profiler so depending on if you want to profile an entire page load or just profile like a single individual actions is going to depend on which one of these you choose for now I'm just going to click start profiling you'll notice this turns red and now I can do anything I want on my application and that is going to be saved inside of the profiler so I noticed when I did sorting it was really slow so let's sort ascending you'll notice it's really laggy really slow okay that just finished up I'm going to go back to my profiler and I'm going to stop it so I can just click this red button and that's going to stop the profiler now if we go over to either of these charts you notice this number in the top right here this one out of 16. this essentially is telling me how many times my react application rendered so pretty much whenever your hooks change your state change or whatever your context change anything that causes a re-render is going to be saved in this section one out of 16. if I have 16 different times in my react application rendered and you'll notice if I go through here they are all these different bars on the right hand side and These Bars tell me how long different things took so if I hover over one of these small bars you can see that it rendered in 0.9 milliseconds my layout effects were 0.1 millisecond and my passive effects were 0.1 milliseconds so I mean this entire bar took one millisecond essentially to render everything while these larger bars these taller ones you notice they took 806 milliseconds to render so they were much much slower than everything else so if you want to debug where the slowest part of your application is do the action that is slow while you're profiling and then look for whatever the tallest bar in this section is you notice there's two specific sections where it was an 800 millisecond render time so I know these are the two places I want to look I want to click on both of these to figure out okay what are the things that are slowing down my application now on top of that there's different things that you can do to look at the information you're getting for example there's three different views you can use you can use the flame graph view this is really good for seeing like a hierarchical view of how everything's going so as you can see it kind of breaks down the very top level of my application and it breaks down all my different hierarchy into all my different components even some of my really small ones and the ones that are actually changing are going to be highlighted in these colors here as you can see so that's great if you want to see like an overall hierarchy but if you want to just determine what are the things slowing down my application this ranked chart is going to be the way to go because when you click on essentially whatever your slowest thing is is going to show up at the very top and it's going to go down from there so for example if I click over here you'll notice this drop down menu content is taking about 40 milliseconds to reload every single time so I know that my bug is related to this drop down menu content and has nothing to do with my task board it's entirely to do with my drop down menu so now that we know that we've clicked this button to clear out of our profiler and then we can actually go to the code to see what is causing that problem and fix that bug so this is just the code for the project if I open up my client and I know that this is in that drop down menu component so I can come over into my component section in the UI and I have this drop down menu inside of here now I know it's in the drop down menu content because that's what it told me the name of the component is and I can look at the code inside of this section to see okay where is my problem and well here we go I obviously this is a problem I have this sleep function being called which is waiting for 20 milliseconds and doing nothing now obviously this is a very contrived example because it's not actually something that you would run into you would never have a sleep function in your code but just imagine there was something slow in my code and I didn't realize it that's essentially what this sleep functions representing something that is slow when taking time so now I can remove this and hopefully just by doing that I've essentially fixed all of my code problems now I can come back into here and I can just test around here I click on my task board you'll notice now all my sorting stuff is super Snappy so it seems like that has fixed the problem but in order to truly tell if the problem has been fixed what we need to do is we need to do our profiler so let's inspect our page go back over to our profile and let's just click the start profile button I'm going to do the exact same thing I'm going to navigate around let's maybe try sorting a couple different columns here maybe we'll change the status of one of these to a medium status and now I'm going to stop my profiler so let's go back to that profiler and we should see that there's really no bars that are taking a super long amount of time so we can see that this bar is rather long here but again if I look at the actual total time that is taking 25 milliseconds to render that's really not that big of a deal especially with all the data I'm rendering on my screen if I go through and I look at all these you notice that really none of them are taking that terribly long I mean there's a ton of different re-renders happening so I have tons of State changing you'll notice as I scan through all of these there's really nothing taking more than 25 or so milliseconds which is great that means my application is rather quick and the huge slowdown I had is essentially fixed so that's pretty much the easiest and most basic way that you can use this tool but there's a lot of other more advanced information you can glean from this if you really want to Deep dive into debugging your application like I mentioned the flame chart is really nice because it gives you a good idea of how everything in your application is re-rendering so you can see if there are certain things that are taking a really long time like in my case most of the render time that is happening is this data table being rendered as you can see there's a ton of information that's being rendered inside of it which is why it's taking you know 22 milliseconds to render you'll also notice that there's two different numbers being printed out here there's 1.9 milliseconds and then there's this 22.6 milliseconds what that is essentially saying is that the data table and all of the children inside of it took 22.6 milliseconds to render but the data table itself with none of the children only took 1.9 milliseconds to render this is a really great way for you to figure out okay is my actual data table slow or is it the children inside of of the data table that are slow my data table took a total of 22.6 milliseconds to render itself and all of the children but the data table itself only took 1.9 milliseconds so most of the Slowdown is just in the sheer number of different children that it needs to render even if all of them only take up you know 0.1 millisecond there's so many of them that it slows it down quite a bit another really nice thing about this view is you can see highlighted in green here is essentially everything that's changed everything that's not gray has changed as you can see in the gray section it did not render at all as we go through here you'll notice that different things are gray because they didn't have to re-render or they didn't render at all so that's really helpful that you can kind of see that information while the things that are colored are actually changed and they are being rendered also if I were to click on something like let's say I want to click on my data table to see how many times that's re-rendered on the right hand side here you can see all of the different instances that this component was re-rendered if I click on it it's just going to jump to that exact time where that state was changed so if you want to have a particular component and you wondered how many times is this being rendered when is it being rendered based on different things in my application I can click around just like this to see exactly why it's rendering and when it's rendering and speaking of why something's rendering you'll notice I have this section called why did this render right here and it tells me okay hook one changed hook one took three changed here it's the first time the component render it'll tell me exactly why it's re-rendered here the props have changed and this is really useful and if you see something like hook three changed all that means is the third hook inside of your component is the one that has the change occurring in it which is causing the re-render this is really great to see is my component re-rendering too many times and you can check why is it actually re-rendering that many times now by default this information is not actually going to be shown to you if you want to see this information you need to click on this Cog right here go to the profile section and then just click record why each component rendered while profiling that'll give you this why did this render section right here which is really useful if you don't have anything clicked on at all it'll essentially just give you information about the basic things on why this actual re-render happened like the duration and then what actually caused that thing to update in our case the data table changed which is what caused this re-render now we already talked about this ranked view which is really great for finding your slow components and there's also this timeline component here this one's a little bit more difficult to parse and figure out exactly what's going on if I just zoom into a particular section here you'll notice that this kind of gives me a breakdown of exactly what's happening on a timeline so I can really see okay at a specific time my drop down menu State update was scheduled and it ran the react render it committed those changes and passive effects happened then as you can see here another change changed here my presence stay updated so now I was doing some more rendering so all these top sections are essentially like why your react State changed whatever actually caused your re-render this bottom section is just all the different time it took to render every single step of the react render process this is really great if you need to get like super nitty gritty and figure out exactly what's going on and why different steps are taking the time that they are this can be useful but I find that this timeline view is really not that useful compared to the actual flame chart and the ranked view here now another thing that's really important for your settings is you can actually hide commits that take less than a certain amount of time so for example I can say you know what any commit that takes less than five milliseconds I don't even want to have show up at all and now you'll notice there's only seven total re-renders that are being shown because there's only seven renders on my page that are taking more than five milliseconds this is great if you want to hide some of those really small things which makes it easier to find the things that are actually slowing down your application for example you could set this threshold to like 50 milliseconds and now you'll only see re-renders that cause your application to take more than 50 milliseconds which is kind of a good cutoff for figuring out what is actually slow inside of your application otherwise you can just leave it as zero like I have here if you want to see absolutely everything that's going on now another really important thing about debugging and profiling is that oftentimes the computer you're working on is rather powerful and fast compared to the computer or mobile device that your users are actually using so in order to emulate a slower device if you go to this performance tab here you can actually massively throttle your computer for example you can six times slow down your CPU and you can even if you have a like multi-threaded processor you can say you know what I only want to use one of those threads at a time to really limit the power of my computer as much as possible that way when I go about and I do my profiling you'll notice that it's going to be much slower if I come in here I'm going to do my profiling I'm just going to you know come in here you'll notice automatically just by doing this I feel a little bit of slow down on my application it's not like massive and destroying things but it is just a little bit slower if we come over back to the profiler and stop this you'll notice that the timing for different things is going to be much larger for example here some of these longer renders these are taking 23 milliseconds but like the passive effects here you can see they're taking 50 milliseconds for that and so on and if I wanted to come in here and I said you know what show me everything that's greater than 50. actually let's do 100 milliseconds there we go now you can see I had two renders so generally if you're trying to debug your application and preemptively find areas that are slow like maybe you don't notice things are slow when you're first testing but you want to test to see if there are any spots that are potentially slow making sure you throttle your performance as much as possible it's a really great area to see what the slowest part of your application is even if it doesn't feel slow on your computer now if you want to learn how to build this project in react you're going to want to take my react simplified course because it is the final project inside of that course now I'm not 100 done with this project or the course I'm working on the last section right now so it's currently not available but it should be available very soon so just go to the sales page and you can check to see if it's available and if it's not you can enter your email at the bottom and I'll let you know as soon as the course is ready for you to take honestly if you want to master react this is the best course out there to do so because it not only teaches you all the fundamentals you need but it teaches you all the more advanced concepts you need to understand in order to build full-fledged projects like you just saw so if you're at all interested in master and react I highly recommend checking out the link in the description down below with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 88,716

Keywords: webdevsimplified, reactjs, react.js, react profiler, react.js dev tools, react.js profiler, react dev tools, react dev tools profiler, react, reactjs performance, react performance

Id: Qwb-Za6cBws

Length: 12min 58sec (778 seconds)

Published: Tue Jul 18 2023