React DevTools Cheat Sheet

📘 1. Components Tab

🔧 Feature	✅ What It Does
Component Tree	Displays your full app as a tree of React components
Expand/Collapse	View parent-child relationships in deeply nested components
Props Viewer	Shows all props passed to a component
State Viewer	Shows useState / this.state values; editable live
Hook Inspector	View all hooks like useState, useEffect, with current values
Highlight in DOM	Hover to highlight the corresponding DOM element
Search Bar	Find components by name (e.g., type "Header")

🧪 Example:

Inspecting <Counter /> might show:

• props: { start: 0 }
• hooks: count = 3 ✅ You can edit count live to test UI!

---

📘 2. Editing Props / State / Hooks

Feature	Description
Live Edit Props	Double-click any prop to change it live
Live Edit State	Click state variable and update value instantly
Edit Hook Values	Works for useReducer, useContext, etc.

🔍 Why it’s useful:

• Instantly test UI without code changes
• Debug forms, inputs, or API behavior

---

📘 3. Highlight Component on Page

Feature	Description
🔍 Highlight on hover	Hover tree to highlight the DOM element
✅ Toggle highlighting	Use the "target" icon to turn highlighting on/off

🧠 Use Case: Perfect for debugging layout and style issues.

---

📘 4. Profiler Tab

Only visible in development mode with Profiler enabled.

Feature	Description
⏱ Record Renders	Start/stop to capture re-render info
🔥 Flame Graph	Visualize which components took time to render
📊 Ranked View	Sort components by render time

💡 Use Case:

• Identify bottlenecks
• Optimize performance-heavy components

---

📘 5. Component Source Location

Feature	Description
📄 Jump to Source	Show file and line of component (via source maps)
🔗 Click-to-open	Click path to open file in IDE (if properly configured)

---

📘 6. Hooks Display

Hook Type	What You See in DevTools
useState	Variable name and current value (e.g., count: 5)
useReducer	State and dispatch function info
useEffect	Not directly shown, but rerender timing shows in Profiler
useContext	Displays current context value inside component tree

---

📘 7. React Strict Mode Support

If using <React.StrictMode>, DevTools helps you:

• See double renders
• Spot unsafe lifecycle methods
• Detect unexpected state mutations

You’ll find warnings in the Profiler or browser console.

---

🔁 Summary Table

Feature	What It Does	Use Case
Component Tree	View component hierarchy	Understand structure
Props/State/Hook Inspector	Live view + edit of component data	Test dynamic behavior
Highlight in DOM	Connect UI with component logic	Debug layout issues
Profiler	Measure render performance	Optimize slow parts of app
Jump to Source	Find component code quickly	Debug/edit faster
Search Components	Filter by component name	Explore large apps
Edit in DevTools	Simulate form input, auth, error UI states	Faster than code editing for testing

---

🧪 Final Tip: Use it Like a Debug Console for React

React DevTools is your React Command Center — it helps you:

• 🐞 Debug more easily
• ⚙️ Understand unfamiliar apps
• 🚀 Optimize performance
• 🧪 Test UI states without rewriting code