just-vibeReact · apply by default
/react-effects
Investigate effect loops, stale closures, and missing cleanup
Use for effect lifetime: subscriptions, cleanup, dependency loops and stale closures; react-async handles request races and stale responses, and react-state handles authoritative data placement.
Make it your own.
In Claude Code, use the slash command and add your context. In Codex, select react-effects from the just-vibe skill picker, then send the same brief.
Version 0.11.0 also supports /jv react-effects, /just-vibe react-effects and /jv:react-effects in Claude. See shortcut setup and context examples.
/just-vibe:react-effects Fix the chat subscription that never unsubscribes, so messages from the previous room keep arriving after switching rooms./just-vibe:react-effects Fix an effect loop caused by an options object recreated on every render./just-vibe:react-effects Audit effect cleanup without reproducing it in a browser; identify the controlled test needed to confirm a leak.What the agent does
- Classify each effect as synchronization with an external system or a derived computation. Derive render-only values directly where appropriate; do not add state/effects merely to mirror existing props.
- Trace dependency identity through setup, dependency change, cleanup and unmount. Check development replay/remount behavior against the installed framework version; cleanup must undo the resource acquired by that setup instance.
- For async synchronization, protect current identity on both fulfillment and rejection and define ownership of any shared work. Avoid suppressing dependency checks or using a permanent once flag to hide an incorrect lifetime. For a current value the effect must read without resubscribing, use useEffectEvent on React 19.2 or later; on earlier versions, keep it in a ref that an effect updates.
- Verify rapid identity changes and repeated setup/cleanup with observable subscriptions, state and resource counts. Distinguish a verified lifecycle fix from a claimed performance improvement that has not been measured.
Inputs
- component, symptom, and expected synchronization.
Optional context: scope, references, constraints, successCriteria, environment, mode, budget.
Scope
- Reads
- Effect dependencies, cleanup, stale closures, loops, and external synchronization.
- Writes
- Apply: only the requested local changes and relevant isolated verification. Inspect/plan requests remain inspection/planning. External actions require their exact action and target in session authorization.
- Mode
- Apply for a reported effect bug; component, symptom, and expected synchronization.
- Prerequisites
- Component source, React/framework versions, state/data conventions, and relevant test tooling. Browser/profiler evidence is needed for measured rendering claims. Preserve existing framework and state libraries unless changing them is part of the request.
Expected output
- Effect repair with its purpose, dependency/lifecycle trace and remount/race regression evidence.
How the work is checked
- Repeated setup and cleanup does not leak subscriptions, timers or listeners; effects rerun only when their real dependencies change and read current values.
When to stop or clarify
- Do not silence dependency warnings to hide the issue. Preserve intended behavior across the framework's development checks.
Handling missing context
- Infer
- Read component callers, ownership of state, installed React/framework versions and existing interaction tests.
- Assume
- Retain the framework and state library; preserve intended loading/error/empty behavior while resolving the named bug.
- Ask
- Ask when product semantics such as persistence, optimistic failure or reset behavior have conflicting evidence; missing profiler access only blocks measured performance claims.
Technical guidance
- Evidence
- Identify the external system, dependency identities, setup, cleanup and reset semantics of each affected effect.
- Method
- Move derived values to render where appropriate; make synchronization cleanup mirror setup and read non-reactive current values with useEffectEvent (React 19.2+) or a ref kept current on earlier versions.
- Pitfall
- Suppressing dependency warnings conceals stale closures; aborting a request cannot undo a completed server mutation.
- Check
- Exercise changed inputs, remount and unmount with controlled timers/promises and verify listeners, requests and subscriptions are released.
Situational decisions
When old async work can complete after a new selection: Guard stale completion as well as cleaning up; cancellation alone does not establish which response is current.
The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.