React DevTools

Learn the component tree with React DevTools.

What is React DevTools?

React DevTools is a browser extension and standalone app that inspects the component tree. It shows each component's props and state live. It can also inspect React Native apps; even on mobile it is ideal for tracking props flow.

The standalone version runs with npx react-devtools. When the app opens it connects automatically. The Components tab shows the tree; clicking a component reveals its props and state in the right panel. The Profiler tab measures render times. This tool is very powerful for finding where props change.

The component tree

The Components tab of React DevTools shows the component tree hierarchically. Each node is a component; child nodes are its children. Clicking a node lists that component's props and state on the right.

This view lets you see which component drew which child. It is useful for verifying that props are passed correctly. When state changes DevTools updates instantly; this makes finding the bug location easier. You can double click a component name to edit it and try temporary values. This makes debugging visual.

Exercise Write Parent and Child

Write two components for DevTools to inspect. The Parent component returns <Child />. The Child component returns <Text>Hello</Text>. Define both with function.

Show example solution

import React from "react";
import { Text } from "react-native";

function Parent() {
  return <Child />;
}

function Child() {
  return <Text>Hello</Text>;
}

Test yourself

Start React DevTools

// To run it standalone: ____ react-devtools

Show answer

// To run it standalone: npx react-devtools

Which tab does React DevTools offer?
```
npx react-devtools
```
- Components
- Files
- Network
- Database
Show answer

Components — The Components tab shows the component tree.
Match each tab to its role

Components

Component tree
Profiler

Render times
props panel

Prop values
state panel

State values

Next lesson: Console

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies