JavaScript and React course · Module 1: React Basics
React Developer Tools - React's control panel
In this lesson7
On a cosmic journey through the React galaxy, a developer needs advanced diagnostic tools - just as a spaceship needs a telemetry and onboard diagnostics system. React Developer Tools is precisely such an advanced control panel that allows you to look under the hood of a React application and understand what's happening inside.
What are React Developer Tools?
React Developer Tools is an official browser extension created by the React team that adds additional tabs to the browser's developer tools. With them, you can:
- Inspect the React component tree
- View and edit component props and state
- Track component rendering
- Analyze application performance
- Debug hooks and contexts
This tool is absolutely essential for every React developer - without it, working with React would be like piloting a spaceship in complete darkness, without any indicators on the dashboard!
Installing React Developer Tools
React Developer Tools is available as an extension for the most popular browsers.
Chrome / Edge
- Visit the Chrome Web Store
- Search for "React Developer Tools"
- Click "Add to Chrome"
- Confirm the installation
Firefox
- Visit Firefox Add-ons
- Search for "React Developer Tools"
- Click "Add to Firefox"
- Confirm the installation
Verifying the installation
After installing, open any page that uses React (e.g., facebook.com, netflix.com, or your own React project) and press F12 to open the developer tools. You should see two new tabs:
- Components - component tree inspection
- Profiler - performance analysis
If you see these tabs, the installation was successful! If the page doesn't use React, these tabs won't appear and the extension icon in the browser toolbar will be gray.
Components Tab - Component tree inspection
The Components tab is the most frequently used part of React DevTools. It allows you to explore the component structure of your application - it's like a structural map of your spaceship where you can see all modules, submodules, and their relationships.
Basic features
1. Props Inspector
When you click on any component in the tree, on the right side you'll see a panel with details. The "props" section shows all properties passed to the component.
2. State Inspector
The "hooks" section shows all hooks used in the component, including their current state.
3. Live editing of props and state
This is one of the most powerful DevTools features! You can click on a props or state value and change it, and the components will immediately re-render with the new values.
Profiler Tab - Performance analysis
The Profiler is an advanced tool for measuring React application performance. It lets you see which components render most frequently and for the longest time - it's like fuel efficiency sensors on a spaceship.
How to use the Profiler
- Click the record button in the Profiler tab
- Perform actions in the application that you want to analyze
- Click the stop button
- The Profiler will display the results
Key metrics
- Commit duration - total rendering time
- Render time - rendering time of a single component
- Number of commits - how many times components were rendered
Debugging Props and State
React DevTools is a powerful debugging tool. Here are a few practical scenarios:
Why isn't the component updating?
- Open the Components tab
- Find the component that should be updating
- Check the "hooks" section - is the state actually changing?
Where does this props value come from?
- Click on the component
- See "rendered by" - which component is the parent?
- Navigate to the parent and check its props
Practical usage examples
React DevTools helps in everyday work with React:
- Testing different states - edit state directly in DevTools
- Debugging forms - check formData values in real time
- Performance optimization - use the Profiler to find slow components
- Tracking data flow - see how props flow through the application
Summary
React Developer Tools is an absolutely essential tool for every React developer:
Components Tab:
- Inspect the component tree
- View props and state
- Edit values live
- Track data flow
Profiler Tab:
- Measure rendering performance
- Identify bottlenecks
- Optimize components
Best practices:
- Install DevTools right at the beginning of learning React
- Use the Components tab for daily debugging
- Use the Profiler when the application runs slowly
- Experiment with live editing of props/state
Remember: a good spaceship pilot knows every indicator on the dashboard. Similarly, a good React developer knows every feature of React DevTools!
The example below is a few components (PlanetCard, InfoPanel, SpaceButton) passing data to each other through props. When you run a similar app locally, the Components tab shows exactly this tree, and clicking PlanetCard shows its props.
Code for this lesson: App.jsx
1import React, { useState } from 'react';
2
3// Component with multiple props
4function PlanetCard({ name, type, distance, moons, temperature, description, color, onSelect }) {
5 return (
6 <div
7 onClick={onSelect}
8 style={{
9 backgroundColor: '#1a1a2e',
10 border: `3px solid ${color}`,
11 borderRadius: '16px',
12 padding: '20px',
13 cursor: 'pointer',
14 transition: 'transform 0.2s, box-shadow 0.2s',
15 boxShadow: `0 4px 20px ${color}40`
16 }}
17 >
18 <div style={{
19 width: '60px',
20 height: '60px',
21 borderRadius: '50%',
22 background: `radial-gradient(circle at 30% 30%, ${color}, #000)`,
23 marginBottom: '15px',
24 boxShadow: `0 0 20px ${color}80`
25 }} />
26 <h3 style={{ color, margin: '0 0 10px 0' }}>{name}</h3>
27 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
28 Type: {type}
29 </div>
30 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
31 Distance: {distance} AU
32 </div>
33 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
34 Moons: {moons}
35 </div>
36 <div style={{ fontSize: '14px', color: '#888' }}>
37 Temperature: {temperature}°C
38 </div>
39 </div>
40 );
41}
42
43// Component with default props
44function SpaceButton({ children, variant = 'primary', size = 'medium', onClick }) {
45 const variants = {
46 primary: { bg: '#667eea', hover: '#764ba2' },
47 success: { bg: '#4caf50', hover: '#45a049' },
48 danger: { bg: '#f44336', hover: '#d32f2f' }
49 };
50
51 const sizes = {
52 small: { padding: '8px 16px', fontSize: '12px' },
53 medium: { padding: '12px 24px', fontSize: '14px' },
54 large: { padding: '16px 32px', fontSize: '16px' }
55 };
56
57 return (
58 <button
59 onClick={onClick}
60 style={{
61 ...sizes[size],
62 backgroundColor: variants[variant].bg,
63 color: 'white',
64 border: 'none',
65 borderRadius: '8px',
66 cursor: 'pointer',
67 fontWeight: 'bold',
68 transition: 'background-color 0.2s'
69 }}
70 >
71 {children}
72 </button>
73 );
74}
75
76// Component with children and spread props
77function InfoPanel({ title, icon, children, ...rest }) {
78 return (
79 <div style={{
80 backgroundColor: '#1a1a2e',
81 borderRadius: '12px',
82 padding: '20px',
83 ...rest.style
84 }}>
85 <h3 style={{ color: '#00d4ff', margin: '0 0 15px 0' }}>
86 {icon} {title}
87 </h3>
88 {children}
89 </div>
90 );
91}
92
93export default function App() {
94 const [selectedPlanet, setSelectedPlanet] = useState(null);
95
96 const planets = [
97 {
98 id: 1, name: 'Mars', type: 'Rocky', distance: 1.5,
99 moons: 2, temperature: -60, color: '#ff6b6b',
100 description: "The Red Planet - target of humanity's future colonization."
101 },
102 {
103 id: 2, name: 'Jupiter', type: 'Gas giant', distance: 5.2,
104 moons: 95, temperature: -110, color: '#ffa726',
105 description: 'The largest planet in the Solar System.'
106 },
107 {
108 id: 3, name: 'Saturn', type: 'Gas giant', distance: 9.5,
109 moons: 146, temperature: -140, color: '#ffcc80',
110 description: 'Famous for its rings made of ice and rock.'
111 },
112 {
113 id: 4, name: 'Neptune', type: 'Ice giant', distance: 30,
114 moons: 16, temperature: -200, color: '#64b5f6',
115 description: 'The planet located farthest from the Sun.'
116 }
117 ];
118
119 return (
120 <div style={{
121 fontFamily: 'Arial, sans-serif',
122 backgroundColor: '#0a0a1a',
123 minHeight: '100vh',
124 padding: '20px',
125 color: 'white'
126 }}>
127 <header style={{
128 textAlign: 'center',
129 marginBottom: '30px',
130 padding: '30px',
131 background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
132 borderRadius: '16px'
133 }}>
134 <h1 style={{ margin: 0 }}>Props in React</h1>
135 <p style={{ margin: '10px 0 0 0', opacity: 0.9 }}>
136 Passing data between components
137 </p>
138 </header>
139
140 <InfoPanel title="Solar System" icon="●" style={{ marginBottom: '20px' }}>
141 <p style={{ color: '#ccc', margin: 0 }}>
142 Click on a planet to see details. Each card receives data through props.
143 </p>
144 </InfoPanel>
145
146 <div style={{
147 display: 'grid',
148 gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
149 gap: '20px',
150 marginBottom: '30px'
151 }}>
152 {planets.map(planet => (
153 <PlanetCard
154 key={planet.id}
155 name={planet.name}
156 type={planet.type}
157 distance={planet.distance}
158 moons={planet.moons}
159 temperature={planet.temperature}
160 color={planet.color}
161 description={planet.description}
162 onSelect={() => setSelectedPlanet(planet)}
163 />
164 ))}
165 </div>
166
167 {selectedPlanet && (
168 <InfoPanel title={`Selected: ${selectedPlanet.name}`} icon="◆">
169 <p style={{ color: '#ccc' }}>{selectedPlanet.description}</p>
170 <div style={{ display: 'flex', gap: '10px', marginTop: '15px' }}>
171 <SpaceButton variant="success" size="small">
172 Explore
173 </SpaceButton>
174 <SpaceButton
175 variant="danger"
176 size="small"
177 onClick={() => setSelectedPlanet(null)}
178 >
179 Close
180 </SpaceButton>
181 </div>
182 </InfoPanel>
183 )}
184
185 <InfoPanel title="Types of Props" icon="◆" style={{ marginTop: '20px' }}>
186 <ul style={{ color: '#ccc', lineHeight: '1.8', paddingLeft: '20px' }}>
187 <li><strong>Basic:</strong> string, number, boolean</li>
188 <li><strong>Objects and arrays:</strong> passing complex structures</li>
189 <li><strong>Functions:</strong> callback props like onSelect, onClick</li>
190 <li><strong>Children:</strong> content between a component's tags</li>
191 <li><strong>Spread props:</strong> ...rest for passing multiple props</li>
192 </ul>
193 </InfoPanel>
194 </div>
195 );
196}Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. What is React DevTools used for?
2. What is the first step when debugging a React application?
3. Which React tool allows you to profile component performance and analyze rendering time?
Hands-on tasks in the game
- Code editor
Create a TestComponent that takes a name prop and displays a heading with that name (e.g. “Diagnostics: Engines”), then render it in the App component as <TestComponent name="Engines" />. When you run such a project locally, you will see TestComponent and its props in the Components tab of React DevTools.
- Vertical ordering
Arrange the React learning path from the basics: