Install React Dev Tools

React Developer Tools are available as browser extensions for popular browsers.

You simply install them as an extension in your browser of choice.

Demo Project

To demonstrate the React Devtools Components and Profiler we use the following code sample.

App.tsx

App.module.css

import React, { useState } from 'react';
import styles from './App.module.css';

export default function App() {
  const [name, setName] = useState('');
  const [accepted, setAccepted] = useState(false);
  return (
    <div className={styles.root}>
      <TextInput
        id='name' label='Name'
        value={name} onChange={setName}
      />
      <CheckboxInput
        id='accept' label='Accept the terms and conditions'
        checked={accepted} onChange={setAccepted}
      />
    </div>
  );
}

const CheckboxInput = React.memo((props: {
  id: string, label: string,
  checked: boolean, onChange: (newChecked: boolean) => void,
}) => (
  <div className={styles.checkbox}>
    <input type='checkbox' id={props.id}
      checked={props.checked} onChange={(e) => props.onChange(e.target.checked)}
    />
    <label htmlFor={props.id}> {props.label}</label>
  </div>
));

const TextInput = React.memo((props: {
  id: string, label: string,
  value: string, onChange: (newValue: string) => void,
}) => (
  <div className={styles.input}>
    <label htmlFor={props.id}>{props.label}</label>
    <input type='text' id={props.id}
      value={props.value} onChange={e => props.onChange(e.target.value)}
    />
  </div>
));

Transcript

00:00

One of the great choice of working with React are first class developer tools for popular browsers. In this lesson we will look at how you can install them and then demo the key features provided by these dev tools. So let's go to demo some of the features provided by the React dev tools. We create two simple custom components, one for a text input, which contains a simple label and an input element, and a second component for a checkbox input, which is essentially going to be the same except for the fact that when we render the input element it'll have tight checkbox and the props are going to be Boolean instead

00:34

of being of type string. These two components should be pretty easy for you to understand if you watched a lesson on events. Let's jump to our application component and create two simple usages for these two simple components. We create a state variable for the name which we intend to via to the text input and a state variable for a bullying accepted, which we intend to via to the checkbox input. So no surprise. When we render a component, we will render a text input with the value and on change wired to the name state and a checkbox input with the checked

01:07

and the on change wired to the accepted state. And of course within the UI you can provide a name whatever you want, and similarly, you can check the checkbox if you want. This gives us a very simple application with sufficient complexity so we can demo some of the advanced features of react dev tools. Now let's take a look at how we can debug and play around with that application by itself within the browser using the React dev tools without having to mess around with it in our code base. The first step of course would be to install the reactive tools for your particular browser. Here I'm using Chrome

01:40

and you can fetch them from chrome.google.com/web store Within the extension section, search for React developer tools. A few extension search results might pop up, but people would want to go with the one that exactly matches this particular name. Going to that extension, you can see that it is very highly rated and downloaded by lots and lots of users. So this would be the extension that we want to install. To install, simply click add to Chrome and then click add extension. Congratulations, you have now successfully installed

02:13

React Developer tools. Now all the extensions that you have will normally get hidden within the extension panel, so let's expand the extensions and pin react developer tools so that they are always available and we don't have to dig into the extension section with the extension set up out of the way, let's jump back to our application. Now. The first thing that you will notice is that extension will actually turn red. And the reason why it is doing so is because we are currently using a development build of React because of course right now we are developing our application. If you are on some website

02:44

that actually is using a production build, for example, a production version of wit.com, which is built with React, you can see that it turns blue and if you click on it, it specifies that this is indeed using a production build. Now the core features Provided by the React dev tools are the components and the profiler tabs. So let's jump back to our application, open up the developer tools, and here you can see components and profiler all the way to the right. Let's start our exploration of the React dev tools. By going into the components tab here,

03:17

we can actually see a component hierarchy for our application. As you saw, we have a route app component within which we decided to render a text input and a checkbox input. Now let's interact with the input to put in a value for the name and see if we can explore some of the internals of our application. If we select our app component within the component tree, you can see that the state is being managed by the app and we have one of the states set to the string Jane Doe. Now, within our app, we actually chose to pass the state down as a value prop for the text input component.

03:49

And when we select the text input within the props section, indeed we can see this value. Fun fact, we can actually modify the props over here as well. As an example, we can change Jane Doe to be John Doe, and you can see that the input re renders with the new prop. Now, similar to how we can actually modify the props over here, we can actually modify state as well. So let's select our app component and try to modify the state string for this particular prop. And when we make that modification, the component will read, render, the new props will get passed in and we see the input with the new Alex Alexander.

04:24

Now editing props and states works with other data types as well. For example, we can modify a bullion from false to two and you can see that the checkbox is now checked similar to standard browser developer tools. There's actually an option to use an inspector to select an element to see which component is actually rendering it. Here, of course, the input is being rendered by text input. Using the component tree, we can actually even navigate to the source code for a particular element. Here you can see that we have navigated to the source code for the text input.

04:56

Another feature offered by the component panel is that we can actually log the component that is currently selected to the console. So if you bring up the console by pressing the escape key, you can see that this component has now been logged. And of course we can expand it to see things like its props. There's actually another way that we can see a component on the console, and that is that whenever we select a component within the componentry that gets assigned to a special variable called Dollar R. So here since we clicked on the app component, you can see the hooks

05:27

and the props that are relevant for our app. Another thing that we can see within the components panel is to actually inspect the underlying dorm element that is being rendered by that component. Here, of course, the app is right under the root div. Now, quite often in a large application, you might struggle to find the particular component that you are looking for, and for that purpose there's actually a search bar within the component panel as well. For example, here we can search text, and the text input gets selected. I think that's enough for the components panel.

05:59

Let's change our attention to the profiler and see how we can use it to measure and then improve the performance of our application. We click the button to reload and start profiling and then interact with the application as an example. Type in the name Jane Doe, and then we stop the recording. Now, every time the components get rendered, we actually get a new commit in the timeline. And when we select a commit, the first commit of course is selected right now we get to see some details about that commit. We can select the different commits within the timeline. And here is something interesting that you might notice.

06:33

Even though we only interacted with the text input, every time the app component re renders with the new state, the checkbox gets rendered as well. Now, it's not a particularly big deal in this particular case, but if the checkbox component had other children as well, this thing would just cascade and we would be rendering everything. Let's see how we can improve this. Now, if you followed along with the course, you might actually know that we can use a function called reactor memo to change a component into a pure component. And what this means is that if the props don't change,

07:07

the component will not re-render. Let's conduct a new profile with the simple change in place. We interact with the input providing some value, and then stop the recording. Here. You will see that the checkbox will no longer get read ended and it shows up as this grade out memo section because the props for the checkbox are not changing between the individual commits. I'll wrap things up there. As always, thank you for joining me and I will see you in the next one.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional React Lessons

React DevTools Masterclass

Subscription Required

Install React Dev Tools

Demo Project

Transcript

Professional React