How to use React DevTools
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
React DevTools is an essential browser extension for debugging React applications, inspecting component hierarchies, and profiling performance. As the creator of CoreUI with 12 years of React development experience, I use React DevTools daily to diagnose issues and optimize component rendering.
The most effective workflow combines the Components tab for state inspection with the Profiler tab for performance analysis.
Install React DevTools
Install the browser extension:
- Chrome: Chrome Web Store
- Firefox: Firefox Add-ons
- Edge: Microsoft Edge Add-ons
Components Tab
Inspect component hierarchy and state:
View Component Tree
Open DevTools → React Components tab to see the component tree. Click any component to inspect:
- Props: Current property values
- State: Component state (hooks or class state)
- Hooks: All hooks in order with current values
- Rendered by: Parent component
- Source: File location
Edit Props and State
Double-click any value to edit it live:
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
In DevTools, select Counter → edit count state → see instant UI update.
Search Components
Use the search box to find components by name:
Search: "Button" → highlights all Button components
Filter Components
Click settings icon → Filter:
- Hide host nodes (DOM elements)
- Show only selected types
- Collapse tree depth
Profiler Tab
Measure component performance:
Record Rendering
- Open Profiler tab
- Click record button (⏺)
- Interact with your app
- Click stop button (⏹)
Analyze Results
View rendering statistics:
- Flamegraph: Visual representation of render times
- Ranked: Components sorted by render duration
- Commit timeline: Each render commit
function ExpensiveList({ items }) {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)
}
Profiler shows:
- Render duration: 45ms
- Number of renders: 3
- Why it rendered: props changed
Identify Performance Issues
Look for:
- Long render times: >16ms for 60fps
- Unnecessary re-renders: Components rendering when props/state unchanged
- Cascading updates: One change triggering many renders
Console Logging
Log selected component to console:
// In DevTools, right-click component → "Log this component"
// Then in console:
$r // Reference to selected component
$r.props
$r.state
Highlight Updates
Settings → Check “Highlight updates when components render”
Components flash when they re-render:
- Green: Infrequent renders
- Yellow: Moderate renders
- Red: Frequent renders (performance issue)
Component Stack
When errors occur, DevTools shows component stack:
Error: Cannot read property 'name' of undefined
at UserProfile (UserProfile.js:15)
at Dashboard (Dashboard.js:42)
at App (App.js:10)
Debugging Hooks
Inspect all hooks in a component:
function UserForm() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [errors, setErrors] = useState({})
// DevTools shows:
// State 0: ""
// State 1: ""
// State 2: {}
}
Owners Tree
View which component rendered the selected component:
App
├─ Layout
│ └─ Header
│ └─ UserMenu ← selected
Standalone DevTools
For React Native or non-browser environments:
npm install -g react-devtools
react-devtools
Then in your app:
import { connectToDevTools } from 'react-devtools-core'
connectToDevTools({
host: 'localhost',
port: 8097
})
Best Practice Note
This is the same DevTools workflow we use when developing CoreUI components. The Profiler tab identifies performance bottlenecks, while the Components tab helps debug state issues. Enable “Highlight updates” during development to catch unnecessary re-renders immediately.
For production applications, consider using CoreUI’s React Admin Template which is pre-optimized with React.memo and useMemo for minimal re-renders.
Related Articles
For performance optimization, you might also want to learn how to measure performance in React for custom profiling and metrics.
