Start a React project
Install React Developer Tools
Inspect the component tree, props, state, and hooks instead of treating the rendered DOM as the complete application model.
React Developer Tools adds Components and Profiler panels to supported browser developer tools.
Use the Components panel to inspect React’s model:
- which component rendered another component
- the current props
- state and Hook values
- which component owns changing data
Use the normal Elements panel to inspect the browser’s model:
- actual DOM elements
- accessibility information
- matched CSS
- event and layout behavior
These views answer different questions. A wrong prop belongs in the component tree. A correct prop with broken spacing belongs in the DOM and CSS.
Select a component, change one state value through the interface, and watch the panel update. Then select the DOM element it produced.
The Profiler records which components rendered during an interaction. Use it after you observe a real performance problem. A render is not automatically expensive, and avoiding every render can make code harder to understand.
Do not edit props or state in DevTools and treat the result as a code fix. Use the inspection to find where the value originates, then change that source.
Lesson completed