Open-source React DevTools extension for spotting performance and state issues in real time

Source: Dev.to

What it covers

• State & UI issues: direct state mutation, missing keys, index‑as‑key
• Render tracking: highlights components with excessive re‑renders
• Effects: missing cleanup and suspicious dependencies
• CLS monitoring in real time
• Timeline view of React events
• Memory monitoring for potential leaks
• Redux: state tree view + manual action dispatch

How it works

• Reads from the React DevTools global hook / Fiber tree
• Analysis throttled to reduce overhead
• Traversal capped to keep it lightweight
• Only injects when the DevTools panel is opened

Install

npx react-debugger

Then load the unpacked extension in chrome://extensions.

Links

• NPM:
• Open‑source repository:
• Demo:

Feedback I’m looking for

• Are the effect warnings useful or too noisy in real projects?
• What’s a reasonable default threshold for “too many re‑renders”?
• Any other React debugging signals you wish existed in DevTools?