ReactJS Dev Tools

React DevTools helps developers inspect the component tree, props, state, hooks, and rendering behavior. It is one of the most important tools for diagnosing React applications.

Components panel

The Components panel lets you inspect a component, see its props, state, hooks, and hierarchy. This is useful when a value is unexpectedly wrong or a component is not receiving the data you expect.

Profiler

The Profiler helps identify components that render frequently or take significant rendering time. Record a user interaction and inspect the resulting commit information.

flowchart TD
A[User interaction] --> B[Profile]
B --> C[Commit]
C --> D[Component timings]
D --> E[Identify expensive work]
E --> F[Optimize]
F --> G[Profile again]

Inspecting Redux-connected UI

DevTools can show component props and state, while Redux DevTools can show action and state transitions when Redux Toolkit is used.

Output

Profiler result:

Checkout
  4.2 ms

Cart
  2.1 ms

ProductList
  48.7 ms  <-- investigate

ProductRow
  0.2 ms each

Common mistakes

• Optimizing based only on console logs.
• Assuming every re-render is a problem.
• Not measuring before and after an optimization.

Interview questions

• How do you debug React state?
• How do you find expensive components?
• What is the Profiler used for?