React: What is React DevTools?

React DevTools is a browser extension (Chrome, Firefox) that allows inspecting React components.

Simple analogy: Imagine you are a doctor. Patient (React application) says: "I have a pain."

• Without DevTools — you look at the patient from the outside and guess what is inside.
• With DevTools — you take an X-ray and see EVERYTHING: bones (components), blood flow (props), pulse (state).

Main features:

1. Components tab:

• Tree of all components on the page.
• Current props and state of any component (can change on the fly!).
• Hooks: see values of useState, useRef, useMemo.
• Search for component by name.
• Go to element in DOM (button "Select in Elements panel").

2. Profiler tab:

• Recording: press "Record", interact with the page, stop.
• React shows which components re-rendered and how long it took.
• Helps find "bottlenecks" — components that re-render too often.

3. Highlight updates:

• React highlights components that are re-rendering. The more often — the brighter.
• Enabled in DevTools settings.

How to install:

1. Install extension for Chrome/Firefox: "React Developer Tools".
2. Open DevTools (F12) → "Components" or "Profiler" tab.