react-errors-debugging
Installation
SKILL.md
react-errors-debugging
Quick Reference
Debugging Tools Overview
| Tool | Purpose | When to Use |
|---|---|---|
| React DevTools (Components) | Inspect props, state, hooks, context | Component data inspection |
| React DevTools (Profiler) | Render timing, flamegraph, ranked chart | Performance investigation |
| Browser DevTools (Console) | Read React warnings and error messages | Error diagnosis |
| Browser DevTools (Sources) | Set breakpoints, step through code | Logic debugging |
<StrictMode> |
Surface impure renders, unsafe effects | Development-time bug prevention |
why-did-you-render |
Log unnecessary re-renders with reasons | Re-render optimization |
| Source maps | Map production errors to original source | Production debugging |
Critical Warnings
NEVER remove <StrictMode> to "fix" double-rendering issues -- the double invocation is intentional. It exposes impure components and side effects. ALWAYS fix the underlying impurity instead.
Related skills