Mục tiêu

Prompt này được thiết kế để hướng dẫn AI refactor một React component theo hướng sạch, dễ đọc, dễ mở rộng và dễ bảo trì. Kết quả đầu ra nên tập trung vào việc cải thiện cấu trúc code, tách trách nhiệm rõ ràng, giảm độ phức tạp và giữ nguyên hành vi hiện tại.

Khi nào nên dùng

• Khi một component trở nên quá dài, khó đọc hoặc chứa quá nhiều logic.
• Khi cần tách UI, state, effect, handler hoặc helper ra khỏi một khối code lộn xộn.
• Khi muốn chuẩn hóa component theo best practices của React nhưng không làm thay đổi chức năng.
• Khi cần AI đề xuất refactor an toàn, có giải thích rõ ràng trước khi áp dụng.

Hướng dẫn tùy biến

1. Thay phần mô tả mục tiêu bằng ngữ cảnh dự án của bạn, ví dụ: tối ưu performance, giảm re-render, tăng khả năng test, hoặc chuẩn hóa theo TypeScript.
2. Bổ sung ràng buộc đầu ra như: giữ nguyên API props, không thay đổi UI, chỉ refactor nội bộ, hoặc ưu tiên functional component.
3. Nếu cần, yêu cầu AI trả về nhiều mức độ refactor: nhẹ, vừa, mạnh để dễ lựa chọn.
4. Thêm yêu cầu về style guide nếu dự án có quy ước riêng như naming convention, folder structure hoặc pattern quản lý state.

Lưu ý

• Nên cung cấp component gốc đầy đủ để AI hiểu đúng ngữ cảnh.
• Nên yêu cầu AI chỉ ra rủi ro nếu refactor có thể ảnh hưởng đến behavior.
• Với code phức tạp, hãy yêu cầu AI giải thích ngắn gọn từng thay đổi quan trọng.
• Nếu cần dùng ngay trong dự án, hãy yêu cầu output theo format rõ ràng như: code đã refactor, danh sách thay đổi, và lý do chọn cách làm đó.

Bộ prompt bên dưới gồm nhiều biến thể để bạn chọn theo nhu cầu: refactor tổng quát, tối ưu readability, tách hooks và xử lý component lớn.