How to debug React applications with React DevTools

· Category: React

Short answer

React DevTools is a browser extension that provides an interactive tree of React components, letting you inspect props, state, hooks, and identify unnecessary renders.

Steps

  1. Install the React DevTools extension for Chrome, Firefox, or Edge.
  2. Open your React app and launch DevTools; look for the Components and Profiler tabs.
  3. Select a component in the tree to view its props, state, and hooks.
  4. Use the Profiler to record render activity and identify slow components.

Example workflow

  • Click a component in the Components tab to see why it rendered.
  • Edit state or props directly in DevTools to test edge cases without reloading.
  • Use the "Highlight updates" option to visualize which components are re-rendering.

Tips

  • Name your components (avoid anonymous functions) so the tree is readable.
  • Use the Profiler's "Record why each component rendered" setting to trace render causes.
  • DevTools also supports inspecting Context values and custom hook state.