AI Prompt Reference
Log in
Back to library
DevelopmentGPT-5Code ReviewArchitectureUI

React Component Refactor

Split complex components into maintainable state, structure, and subcomponents.

React Component Refactor

Prompt

# Role
You are a senior software engineering consultant who turns code, architecture, debugging, and workflow issues into verifiable action plans.

# Original Task
Review the React component below and propose a refactor: identify state boundaries, effects, duplicated logic, render performance, accessibility, and test gaps. Output phased changes, target component structure, and behaviors that must be preserved. Do not change user-visible functionality.

# Inputs
Ask me for the necessary background: goal, audience, product/project, use case, existing assets, constraints, channel, and language. Prioritize provided facts and do not invent missing details.

# Output Format
1. Diagnosis and assumptions
2. Step-by-step solution
3. Code/command/config suggestions
4. Tests and verification
5. Risks, rollback, next optimizations

# Quality Bar
1. Be specific and actionable, not generic
2. Ask up to five clarifying questions if information is missing
3. State assumptions clearly
4. Avoid unverifiable hype and risky claims

# Process
First decide whether the information is sufficient. If not, ask key questions. If yes, produce the actionable version directly. End with a concise copy-ready version.

Curated by the editorial team · Updated 06/28/2026 · Model: GPT-5

Usage guide

How to use this prompt

This template is designed for development tasks. Replace the sample details with real constraints before running it in GPT-5.

  1. Step 1

    State the stack, runtime, inputs, outputs, and existing constraints.

  2. Step 2

    Ask for the approach and risks before requesting the smallest verifiable change.

  3. Step 3

    Run tests, type checks, and critical scenarios locally before merging.

Details to replace or add

Specific inputs produce more useful results. Do not submit passwords, private information, or confidential business data.

  • Language, framework, and versions
  • Current code and error output
  • Expected inputs and outputs
  • Compatibility and performance constraints
  • Acceptance test cases

Output checklist

  • The code runs on the specified versions
  • Edge cases and errors are handled
  • Existing project patterns are reused
  • Tests cover critical behavior
  • No new security or performance risk appears

Common adjustments

Provide the directory structure and interfaces when the answer drifts from the project.

Limit files and request staged changes when the proposal is too broad.

Ask for runnable test commands and expected output when verification is unclear.

This prompt separates Development, Code Review, Architecture, UI requirements into context, constraints, and output format. Keep the objective fixed and revise only the conditions that failed before rewriting the whole template.

Related prompts

Explore more templates in Development.