Using React Developer Tools Extension

1. What is React Developer Tools?

React Developer Tools is an official browser extension created by the React core team (available for Chrome, Firefox, and Edge).

While standard browser DevTools (Elements, Console, Network) inspect the physical HTML DOM, React DevTools allows you to inspect the actual React Component Hierarchy, including props, state, hooks, context, and render performance.

2. The Two Core Tabs

Once installed, React DevTools adds two new panels to your browser developer tools:

Tab 1: Components

• Component Tree: Browse the hierarchical tree of React components exactly as structured in your source code.
• Inspect Props & State: Click any component in the tree to view and modify its current props, state, and hooks in real time.
• Source Link: Click the <> icon to jump directly to the component's source code file in your IDE or browser sources.
• Search & Filter: Search for components by name or filter out host DOM nodes.

Tab 2: Profiler

• Record rendering performance and flame graphs.
• Discover which components re-rendered, why they re-rendered ("What caused this to render?"), and how many milliseconds each render took.

3. Highlighting Re-Renders

One of the most powerful diagnostic features in React DevTools is "Highlight updates when components render":

1. 1
   Open React DevTools -> Click the Settings Gear icon.
2. 2
   Under the General tab, check "Highlight updates when components render."
3. 3
   Interact with your application.

Whenever a component re-renders, a colored rectangle flashes around it in the viewport:

• Green: Fast / normal re-render.
• Yellow / Red: Frequent or computationally heavy re-render.

This immediately exposes unintended re-render cascades across your interface.

4. Selecting Components via Console ($r)

When you select any component in the Components tab:

• React DevTools automatically assigns that component instance to a global console variable named $r.
• Switch to the Console tab and type $r to inspect its props, state, and methods directly in JavaScript!