debug-react_skill

Overview

This skill helps you debug React issues systematically across functional components, hooks, Server Components, and concurrent features in React 18/19. It focuses on common runtime errors, hook pitfalls, SSR/SSG hydration problems, performance regressions, and memory leaks. The guidance is practical: reproduce, isolate, diagnose, fix, and verify with targeted patterns and tools.

How this skill works

The skill inspects error patterns (TypeError, Too many re-renders, hydration mismatches, hook rule violations, missing dependency warnings) and maps each to concrete causes and fixes. It recommends diagnostic steps: reproduce reliably, isolate the failing component or effect, use developer tools and logs to diagnose, then implement fixes and add tests. It also suggests preventive practices like stable references, cleanup in effects, and using profiling tools.

When to use it

• When you see runtime errors like "Cannot read property of undefined" or TypeError traces
• When a component causes infinite re-render loops or triggers "Too many re-renders"
• When hooks behave with stale values or you get missing-dependency warnings
• When server-rendered HTML mismatches client render (hydration warnings)
• When memory usage grows due to leaks from effects, timers, or subscriptions
• When performance profiling shows unnecessary re-renders or slow components

Best practices

• Reproduce consistently in both dev and production builds before changing code
• Keep hooks at top-level and declare dependencies explicitly; use useCallback/useMemo for stable refs
• Always clean up effects: return teardown functions or use AbortController for fetches
• Prefer optional chaining, early returns, or initialized state to guard against undefined data
• Use React DevTools Profiler and why-did-you-render to find render hotspots
• Add focused unit/integration tests for any bugfix to prevent regressions

Example use cases

• Fix a component throwing "Cannot read property of undefined" by adding guards, default state, or early returns
• Resolve an infinite render loop caused by setState in render or unstable object deps using useEffect/useMemo
• Eliminate stale closure bugs in intervals by using functional updates, refs, or useEffectEvent
• Address hydration mismatches by deferring client-only values to useEffect or using client-only components
• Stop memory leaks by unsubscribing in effect cleanups and using AbortController for async calls
• Improve performance by profiling, tracking renders, and stabilizing props with memoization