React Developer Tools | Components & Profiler

hello youtube raul here in today's video we're gonna look at the react dev tools how you can use them to analyze your components and how you can create a profile to analyze your app's performance first let's look at how we can install them if we go to google and search for react devtools the first result is the chrome.google.com react developer tools from the chrome web store if you go here you're gonna have an install button if you don't already have them installed if you don't click the install button and come back to the video after they are installed before we use them let me show you the small application i have created on which you can learn how to use them if you want you can use any app that you like it doesn't really matter if you want you can also create this one so it's a blank react app i have stripped the unnecessary files in the app we have an input which has a value from a used state hook an unchanged event listener which will set the value of that of the name to the event.target.value a button that will create an alert which will say hey and the name and the text on the button is click me and a list component which receives a number of items prop now this list component just is just a for loop that will create a ul and inside of that ul it will put 200 or how many number of items we pass allies and dll the li is also a component called list item which has the text so nothing complicated i didn't want to have a really complex app here just anything you can use to see how the tools work so now if we go to google chrome we can access the chrome dev tools and if we open the chrome dev tools we will see two new tabs you can find them here at the top and if you can find them there are in the extended menu with these arrows one of the tabs is called profiler and the other one is called components let's go to the components one first this one displays a tree like structure of all the components we have inside our application so we have the apple good component then a list and then 200 list items each one has a different value you can see if we hover a component it shows us which one in the three it is we also have a search field here so we can search for a specific component for example i can type list and it will highlight all the list components we also have a button that allows us to select the component from our application here at the top left if i click it and then go to any of the components let's choose the 21 i can click it and it will focus it here in the in the tree structure now let's look at the right side of this components tab we can see the props if we have some hooks on it so for example if i go to the app we also see the hooks so on this we just have a use state hook we don't have any props on the app if we want to change the value for example of the state you can see now it says raoul123 but i can go here in the dev tools and type test into it i click enter and you can see the value in the input field updated we can also do that with props so let's go to the list item with the number zero so the first one and i can update it and make it say hello there youtube if i click enter you can see the first one becomes hello there youtube these changes won't be maintained after we refresh the page so if i refresh the page we're gonna go to an empty input field and the first one is gonna be again zero okay now here we have a few options in the menu so first one is called suspend the selected component so if you are using react suspense you can use this button to check the component while it's still loading to see if for example you can display the spinner correctly the second button is called inspect the matching dom element and if i click it it will take me to the elements tab of the dev tools and it will focus the dom element that was created for that specific component now let's go back the next one is called log this component data to the console if i click it and then go to the console tab we can see here we have a console log click to expand list item i didn't add a key to my for loop that's why it shows this warning and here we have the props of it we have the nodes the location so where the location of the file is in our file system and if it shows us some hints if i right click on something you can store the object as a global variable now back to the components tab the last button right here is called view source for this element so if we have a component i can click on this button and it will show me the source code for that component so we can we have it right here i have everything in one file but if you have them in separate files it will show you that specific file for them okay and here we have also has two copy to clipboard buttons we can copy the props and also the source of the page to clipboard and we also have a rendered by section which will show you the three structure for the parent elements of your clicked one so the parent elements of list item are list app create legacy root and react dom 17.0.1 now let's go to the profiler tab here in this profiler tab you can create performance profiles to analyze the performance of your application if you have performance issues if you feel like your app is slow you can come here you can analyze the recording i'm going to show you how to do it in a second and based on that you can make the specific modifications before we create the first flame graph which is going to be a graphic based on the rendering let me show you something really interesting so you can analyze your app in the settings tab right here on the general tab you can highlight updates when components render check this close the settings now let's go back to our component and type something in the input and you will see the highlights around each of the components that means every time the component renders it will put an outline around it if it renders many times the outline will turn from green to yellow and then to red if it really is many times you can see we have a pretty big problem with our list because it re-renders every time we type something into the input this is a pretty big problem this is one way you can analyze your app and if you see some highlights when there shouldn't be any components that re-render or maybe you expect just one part of the app to render but for some reason your whole page lights up then it means you have to analyze your performance for your app now let's deactivate that because it will just cause visual troubles for us and let's create a flame graph for that we have here at the top left corner a recording button if i press it it will turn red and now all the actions that we perform are gonna be recorded for that i'm just gonna press one letter and then i'm gonna stop the recording for now and you can see we have the flame graph right here it shows us the components if the components light up that means they rendered so green and yellow means they rendered if they are grayed out that means they didn't render for this specific action so for here because as i shown you i have created this app to have some some problems everything renders so you can see the app renders because it's hooks changed that means if we go into the app this use state right here the value updated so that's okay it's expected for that to be updated but for the list item nothing changed and if we hover it you can see why did this render and it says the parent component re-render if you don't see this why did this render then you can go into the settings and in the profiler tab check this record with each component rendered while profiling and then you will have to recreate your the component the parent component updated is not a good reason for our component to render because our list has nothing to do with the input and the button there are a few solutions in a future video i will show you how to use memorization and react.memo plus hooks like use callback and use memo but for this there is a pretty easy solution so that the list doesn't re-render we can just go into our app create a new component const message and here we will move our use state hook and also we will return these inputs and the button so i'll return a div and i'll put them inside the div and then above the list i'll just render that message now if i save and we go back to our app i refresh the page let's try that again start a new recording i'm going to type more things right now because i want to show you something else too also let's create the alert and now let's stop the recording you can see now we have one of 14 here that means we have 14 registered actions but if we look at the app the app didn't render the message we rendered because its hooks changed but the list didn't re-render anymore now this means we have optimized our app now if we also highlight the updates when the components render now you can see the message component highlights but the other parts of our app stay the same this is a great way to improve your app's performance if you feel like it's slow now let's go further with our tutorial i told you about all of these 14 actions you can see some of them in the section right here you can click on each specific section and it will show you what happened if you click on an item it will enlarge it and show you some data for it as well and you can also navigate between different commits right here with the arrows so you can see i can move left and right now if you want to record the performance of your application when it first renders you don't press this recording button you press the second one which will reload your application and then start the profiling let's try that okay let's type something into the input press the click me button okay and then stop the recording so we can you can see we have two actions right here the first part is the recording if i hover the app it says this is the first time the component rendered so this is the initial render of our application and the same goes for the others that's good so every time you see the first time this component rendered it's okay because that means the component only renders one time when you see some other messages that's when you have to investigate also here in the second tab near the flame graph chart you have the ranked chart if you click it it will show you how much each component took to render and it will order them by time so for example the list took 10.2 seconds to render and you can also clear the profiling data by using this third button here and if you want to save some data about your profile then you can click the save button the fifth one and if you want to load an old profile you can click the load profile button now in the settings there's not much left in the general tab you can switch the theme the display that highlight you have some debugging options and how the components are shown in the tree for these settings are also for the components and the profile tabs you can create rules so that it won't show you specific types of components and in the profiler tab you can also make it so that it doesn't show you components that took less than a certain amount of milliseconds to render okay this was it for the react devtools i hope this tutorial helped you debug your application and find better ways to improve it i hope you enjoyed this video if you did let me know in the comments below if i should make more videos like this also don't forget to like the video and subscribe to the channel thank you all for watching and i'll see you next time

Channel: Raul Terhes

Views: 5,982

Keywords:

Id: 4U37IRrt_zQ

Length: 12min 57sec (777 seconds)

Published: Fri Mar 12 2021