GitHub Copilot prompt to refactor a large component
This prompt breaks a bloated component apart in three supervised passes: inventory, logic extraction, then render extraction. GitHub Copilot pauses after each pass so every diff stays small enough to actually review, and the hard constraints, no prop renames and no test edits, stop the refactor from drifting into a rewrite.
Last updated
Refactor the component I have open; it has grown too large to review. Work in this order and stop after each step so I can check the diff in Copilot Edits. Step 1: inventory what the component does, its state, effects, and render sections, and propose a split into child components and hooks with names. Step 2: extract pure logic into plain functions or a custom hook, no behavior changes, props typed explicitly. Step 3: extract the render sections into child components, keeping state at the lowest level that still works. Do not rename public props, change emitted events, or touch files outside this component's folder. After each step run the existing tests and the type checker; if either fails, fix the extraction rather than adapting the tests. End with a summary of what moved where.
Same task in other tools
Questions about this prompt
Copilot did all three steps in one shot. How do I make it pause?
In Chat it sometimes barrels through numbered steps. Send step 1 alone, review, then say "proceed to step 2". Edits naturally checkpoints anyway because you accept or discard each file's diff before continuing.
My component is Vue or Svelte, not React. Does the prompt still work?
Yes, swap "custom hook" for a composable or a plain module. The order matters more than the framework: logic out first, then template sections, because logic extractions are the easiest to verify with existing tests.
There are no tests on this component. What should I do first?
Ask Copilot for characterization tests before refactoring: "write tests that pin the current behavior of this component, including the weird parts". Without that baseline, a broken extraction in step 2 or 3 is invisible.