React DevTools
- React Native course
- Intermediate
- Lesson 101/116
- 5 min
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.
Practice 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.
Starter code
// Write Parent and Child components
// Parent should use ChildSample solution
import React from "react";
import { Text } from "react-native";
function Parent() {
return <Child />;
}
function Child() {
return <Text>Hello</Text>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Start React DevTools
// To run it standalone: ____ react-devtools// To run it standalone: npx react-devtoolsExplanation: npx react-devtools opens the standalone version.
2 Which tab does React DevTools offer?
npx react-devtools- Components Correct answer
- Files
- Network
- Database
Explanation: The Components tab shows the component tree.
3 Match each tab to its role
| Term | Meaning |
|---|---|
Components |
Component tree |
Profiler |
Render times |
props panel |
Prop values |
state panel |
State values |