Windsurf prompt to refactor a large component
Big components die from one giant rewrite, so this prompt forces Windsurf to map state and effects first, then extract helpers, hooks, and child components as separate small edits it verifies with your tests. Cascade's multi-file edit flow suits this well, and the behavior-preservation rules keep the diff safe to review.
Last updated
Refactor the large component I point you at without changing its rendered output or observable behavior. First map it: list every piece of state, every effect, and which JSX blocks depend on each, so we agree on the seams before you cut. Then extract in this order: pure helper functions to a sibling utils file, data fetching into a custom hook, and self-contained JSX regions into child components with explicit props, no prop drilling more than two levels (lift to context if deeper). Keep each extraction as its own small edit so the diff stays reviewable. Preserve memoization semantics: anything previously wrapped in useMemo or useCallback must keep equivalent dependencies. After every extraction, run the existing tests and typecheck in the terminal. Stop and ask before touching anything with side effects on mount. End with a before-and-after line count and the new file list.
Same task in other tools
Questions about this prompt
The component has no tests at all. Can I still run this?
Add one step at the top: have Cascade write a render or snapshot test capturing current output before touching anything. Without that safety net the 'run the existing tests' checkpoint verifies nothing, and behavior drift slips through unnoticed.
How big a component can one flow handle?
Reading the file is rarely the constraint; review capacity is. If the component mixes several unrelated concerns, do the mapping step in one flow, then split the extractions across two or three follow-up flows so each diff stays small enough to actually read.
Cascade renamed props during extraction and broke a parent component. How do I prevent that?
Add 'keep every existing prop name and export signature unchanged' to the prompt, and check each per-file diff before accepting instead of approving the whole flow at once. The parent breakage almost always shows up in a file you were not watching.