React Basics
React Developer Tools
React Developer Tools is a free browser extension for Chrome, Edge and Firefox that adds Components and Profiler tabs to DevTools. The Components tab shows your live component tree with its props, state and hooks; the Profiler records what re-rendered and how long it took.
What is Developer Tools in React?
React Developer Tools is a free browser extension for Chrome, Edge and Firefox that adds Components and Profiler tabs to DevTools. The Components tab shows your live component tree with its props, state and hooks; the Profiler records what re-rendered and how long it took.
Why Developer Tools matters
Reading actual props and state beats scattering console.log statements, and the Profiler turns "the app feels slow" into a concrete list of components that rendered more often than they needed to.
Developer Tools example
Components tab
• live component tree, searchable by name
• props, state and hook values for the selected component
• edit state/props directly to test a UI branch
• jump to the component's source file
Profiler tab
• record an interaction, then see a flame chart per commit
• which components rendered, and why
• how long each render tookKey points to remember
- Components highlighted in the tree can be edited live — useful for testing loading and error states.
- Turn on "Highlight updates when components render" to see re-renders flash on screen.
- The Profiler only works on a development build; production builds strip the timing hooks.
Common mistakes with Developer Tools
- Optimising from a hunch instead of a Profiler recording.
- Expecting the extension to work on a minified production bundle — it shows anonymous names at best.
React Developer Tools— Interview Questions & FAQs
How do I find why a component re-rendered?+
Record an interaction in the Profiler tab and enable "Record why each component rendered" in its settings. Each commit then lists the reason — props changed, state changed, or the parent rendered.