effect-xray-refactor

name

effect-xray-refactor

description

Tool-grounded, behavior-preserving refactor of unnecessary useEffects in React/TSX, using effect-xray to map each effect's wiring before touching it. Reach for this when auditing or removing useEffect hooks in a large or unfamiliar component — where the same state is set in several places and a naive "convert to a derived value" would silently break a handler or drop data, or when you want the removal verified rather than eyeballed. Most useful when an effect's wiring isn't obvious from a quick read; for a single, plainly-derived effect in a small file, a direct edit is fine and you can skip this. It runs effect-xray, triages each effect off the blueprint (including where else the setter is driven), picks the right replacement, and changes one effect at a time with verification — never batch-ripping, never guessing intent the code doesn't state.

effect-xray refactor session

This is the action layer for effect-xray. The tool is a read-only lens: it x-rays a useEffect and shows what it's wired to, taking no stance on what to do. This skill acts on that picture, and because it edits code, the discipline the tool doesn't need lives here.

The work is careful because removing an effect changes render timing and intermediate state, and the correct replacement is decided by intent that isn't in the code. The job is never "delete the effects the tool flagged" — it's "read the wiring, confirm intent, pick the right move, keep behavior, verify."

Calibrate effort first

The full workflow below (run the tool, triage, verify) earns its cost when the wiring is non-obvious: a big or unfamiliar component, a setter that's written in several places, a deps mismatch, or anything where a wrong cut breaks something elsewhere. For a single, obviously-derived effect in a short file, skip the ceremony and just make the edit — running a tool to confirm what's already plain is wasted motion. Scale up only when the picture isn't clear from reading.

Workflow