debug-react

Diagnose missing sibling side effects in React state flows.

22|3|Updated Jul 28, 2024
One-click install
npx skills add https://github.com/webdevcody/go-mailing-list --skill debug-react-webdevcody
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-react
Source: https://github.com/webdevcody/go-mailing-list/tree/main/.claude/skills/debug-react
Command: npx skills add https://github.com/webdevcody/go-mailing-list --skill debug-react-webdevcody

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugs React failures where the UI looks mostly right but a paired sibling side effect never runs, leaving the app in a partially-correct state.

Core Features & Use Cases

  • State-layer seam diagnosis: Targets silent gaps caused by lazy React updaters, reducer/setState logic, and context/store dispatch paths.
  • Stale closure detection: Identifies bugs from useCallback(..., []) and useEffect dependency mistakes that freeze values at mount.
  • StrictMode-specific behavior checks: Helps explain dev-only breakage due to double-invocation masking missing idempotency.
  • Focus/DOM race verification: Detects unmount/focus cleanup interactions that can interfere with the intended focus changes.
  • Use Case: When one update appears to land (visible state changes), but a gated side effect after it never fires (e.g., a second setX, cleanup, IPC, or follow-up dispatch), use this skill to find the state-machine seam that caused the missing action.

Quick Start

Use the debug-react skill to trace a suspected React state update that should have triggered a sibling side effect but didn’t.

Frequently Asked Questions about debug-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my React useEffect side effect not fire after a state update?▼

Your React useEffect side effect might not fire due to stale closures or lazy updater gating issues in state-layer seams. Diagnose missing sibling side effects by tracing dispatch paths and verifying dependency arrays to ensure branches truly execute.

How do I debug stale closures in React useCallback hooks?▼

Debug stale closures in React useCallback hooks by checking if empty dependency arrays freeze values at mount. Trace whether callbacks reference outdated state and validate if side-effect branches actually executed to identify frozen value pitfalls.

Why does my React component break in StrictMode but work in production?▼

React StrictMode double-invokes components in dev to surface missing idempotency, causing dev-only breakage. Diagnose these StrictMode-specific behavior checks to see if double-invocation is masking missing side-effect cleanup or state update logic.

What is the best way to trace missing React reducer dispatches?▼

The best way to trace missing React reducer dispatches is to investigate state-machine seams in reducer or useState updater logic. Validate whether gated side-effect branches truly executed and check context/store dispatch paths for silent gaps.

How do I fix unmount race conditions interfering with focus changes?▼

Fix unmount race conditions interfering with focus changes by verifying focus and DOM cleanup interactions. Detect unmount cleanup logic that interrupts intended focus updates and ensure side-effect branches complete before component teardown.

Does this debugging approach work for useReducer state flows?▼

Yes, this approach works for useReducer state flows by diagnosing missing sibling side effects within dispatch paths. It validates lazy updater gating, detects stale closures across hook-managed logic, and ensures side-effect branches truly executed.