{
  "id": "refactor-a-react-component-safely",
  "type": "prompts",
  "category": "prompts",
  "locale": "de",
  "url": "/de/prompts/refactor-a-react-component-safely",
  "title": "Prompt zum sicheren Refactoring einer React-Komponente",
  "description": "Strukturierter KI-Agent-Prompt zum Refactoring einer komplexen React-Komponente mit einem Lese-Audit-Refactor-Verify-Zyklus, der Regressionen verhindert.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "typescript",
    "nextjs",
    "review"
  ],
  "difficulty": "medium",
  "updated": "2026-06-08",
  "markdown": "Verwenden Sie diesen Prompt, um ein diszipliniertes Refactoring der Komponente durchzuführen – der Agent prüft (audit), bevor er Änderungen vornimmt, extrahiert Unterkomponenten einzeln und überprüft nach jedem Schritt die Typen, anstatt die gesamte Datei auf einmal neu zu schreiben.\n\n## Haupt-Prompt\n\n```txt title=\"Main Prompt\"\nYou are refactoring a React component in a Next.js App Router TypeScript project.\nThe target file is: [INSERT PATH, e.g. src/components/ProductCard.tsx]\n\nRefactor goal: split a large monolithic component into smaller, reusable pieces without\nchanging any observable behavior or UI output.\n\nFollow these phases exactly — do not skip or combine them.\n\nPhase 1 — Audit (no changes):\n  - List every `useState` and `useEffect` call and what it manages.\n  - List every prop the component accepts (with types).\n  - List any inline sub-sections that could be extracted (e.g., a header, a list, a footer).\n  - Identify any duplicated logic (e.g., the same conditional repeated).\n  Output the audit as a numbered list. Stop and wait for my review.\n\nPhase 2 — Extract pure sub-components (one at a time):\n  - For each extractable section identified: create a new file, move the JSX and its\n    required props, export a typed interface for the props, import and use it in the parent.\n  - After each extraction: run `bun run typecheck`. If it fails, fix the error before\n    the next extraction.\n\nPhase 3 — Extract custom hooks:\n  - If any `useEffect` + `useState` pair manages a single concern (e.g., a data fetch,\n    a keyboard listener), extract it to `src/hooks/use<Name>.ts`.\n  - After each extraction: run `bun run typecheck`.\n\nPhase 4 — Remove duplication:\n  - Consolidate any repeated conditional logic into a shared helper.\n  - Do NOT change the logic — only the structure.\n\nPhase 5 — Final verify:\n  - Run `bun run typecheck`.\n  - Show a summary of all files created or edited.\n  - Do NOT change any business logic, API calls, or UI output.\n\nAfter each phase, show the diff and wait for my confirmation before proceeding.\n```\n\n## Implementierungshinweise\n\n- Die wichtigste Einschränkung ist die Verhaltensbewahrung: Das Refactoring muss eine rein strukturelle Änderung sein. Bitten Sie den Agenten, dies nach jeder Phase zu bestätigen, indem er prüft, ob der Diff keine Logikänderungen enthält.\n- TypeScript ist hier das Sicherheitsnetz: Das Ausführen von `typecheck` nach jeder Extraktion erkennt sofort fehlende Props oder falsche Type Narrowing.\n- Die Extraktion von benutzerdefinierten Hooks ist nur sicher, wenn der Zustand des Hooks auf eine einzelne Komponenteninstanz beschränkt ist. Wenn der Zustand geteilt werden muss, extrahieren Sie nicht – notieren Sie es und stoppen Sie.\n\n## Erwartete Dateiänderungen\n\n```txt\nsrc/components/<name>.tsx            (edited — original component, slimmed down)\nsrc/components/<name>Header.tsx      (new — extracted sub-component)\nsrc/components/<name>List.tsx        (new — extracted sub-component)\nsrc/hooks/use<name>.ts               (new — extracted hook, if applicable)\n```\n\n## Akzeptanzkriterien\n\n- `bun run typecheck` beendet sich nach jeder Phase mit Exit-Code 0.\n- Das Props-Interface der übergeordneten Komponente bleibt unverändert.\n- Es werden keine `any`-Typen eingeführt.\n- Die UI-Ausgabe ist vor und nach dem Refactoring pixelgenau (überprüft durch visuelle Inspektion oder Snapshot-Tests).\n\n## Testbefehle\n\n```bash\nbun run typecheck\nbun run build\n# if snapshot tests exist:\nbun test --update-snapshots   # run BEFORE refactor to capture baseline\n# then after refactor:\nbun test                       # snapshots should pass without update\n```\n\n## Häufige KI-Fehler\n\n- Ändern des Verhaltens eines Callbacks beim Extrahieren in eine Unterkomponente (z. B. Hinzufügen von `useCallback` mit falschen Abhängigkeiten, wodurch sich der Ausführungszeitpunkt stillschweigend ändert).\n- Extrahieren eines Hooks, der einen von mehreren Komponenteninstanzen gemeinsam genutzten Zustand hält, was zu Zustandsverlust führt.\n- Einführen von `any`-Typen bei den Props der extrahierten Komponente, um die Auflösung komplexer Generics zu vermeiden.\n- Überspringen von `typecheck` zwischen den Phasen, wodurch sich Fehler ansammeln, die schwer nachvollziehbar sind.\n\n## Korrektur-Prompt\n\n```txt title=\"Fix Prompt\"\nA type error appeared after an extraction or behavior changed. Fix in order:\n1. Run `bun run typecheck` and show me only the errors — do not fix anything yet.\n2. For each error: if it is a missing prop, add it to the extracted component's props interface.\n   If it is an `any` type, resolve it using the type from the parent component's existing interface.\n3. If any logic changed (a conditional, an effect dependency, a callback), revert that specific\n   change only. Show the revert diff before applying it.\n```"
}