React: What is React DevTools and how to use it for debugging?

React DevTools is a browser extension for inspecting and debugging React components.

Features:

1. Components Tab:

• View component tree
• Inspect props and state
• Edit props/state live
• Search components by name

2. Profiler Tab:

• Record performance profiles
• See which components re-render
• Identify slow renders
• Flamegraph and ranked chart

Usage:

1. Install extension (Chrome/Firefox)
2. Open browser DevTools
3. Go to "Components" or "Profiler" tab

Debugging techniques:

1. Find why component re-renders:

• Right-click component → "Why did this render?"
• Shows what caused the re-render

2. Highlight updates:

• Enable "Highlight updates when components render"
• Visually see what re-renders

3. Inspect hooks:

• See useState, useEffect, useContext values
• Edit values directly

4. Profiler workflow:

1. Click record
2. Perform action
3. Stop recording
4. Analyze flamegraph

Code — why-did-you-render:

1// Add to entry point for extra logging
2if (process.env.NODE_ENV === "development") {
3  const whyDidYouRender = require("@welldone-software/why-did-you-render");
4  whyDidYouRender(React, { trackAllPureComponents: true });
5}