🛠️ Using React DevTools

React Developer Tools is a powerful browser extension that allows you to inspect the component hierarchy, props, state, and hooks in your React apps.

📦 1. Installation

• Chrome Extension
• Firefox Add-on

🔍 2. Key Features

• Component Tree: Visualize the component hierarchy
• Props & State: View and edit live values
• Hooks: See hook names and values (e.g., useState, useReducer)
• Profiler: Measure render time and performance bottlenecks

🧭 3. How to Use

• Open your app in the browser
• Open Developer Tools (Right click → Inspect or F12)
• Switch to the ⚛️ Components or Profiler tab
• Click on a component to inspect its props, state, and hooks

📊 4. Profiler Tab

The Profiler lets you:

• Record rendering performance
• Find unnecessary re-renders
• Optimize slow components

✅ Bonus Tips

• Use the search bar to find components fast
• Click the eye icon to highlight the DOM node in the page
• Use the “Rendered by” section to trace component hierarchy