Bộ prompt này giúp bạn bóc tách các nguyên nhân phổ biến khiến ứng dụng React bị re-render liên tục, state cập nhật vòng lặp, effect chạy sai phụ thuộc và memory leak do subscription, timer hoặc request chưa được cleanup. Phù hợp cho cả debug nhanh theo triệu chứng lẫn phân tích sâu theo file code, kèm gợi ý sửa lỗi, checklist xác minh và hướng tối ưu hiệu...
Mục tiêu
Prompt này được thiết kế để hỗ trợ debug các vấn đề khó chịu trong ứng dụng React như render lặp, re-render không cần thiết, vòng lặp do state/effect và rò rỉ bộ nhớ phát sinh từ event listener, timer, subscription, request bất đồng bộ hoặc cleanup chưa đầy đủ. Mục tiêu không chỉ là tìm lỗi mà còn giúp giải thích nguyên nhân gốc, mức độ ảnh hưởng và cách sửa theo thứ tự ưu tiên.
Khi nào nên dùng
- Khi component React render quá nhiều lần làm chậm giao diện.
- Khi useEffect chạy lặp, gọi API liên tục hoặc cập nhật state vô hạn.
- Khi chuyển trang, unmount component hoặc thao tác lâu gây tăng RAM bất thường.
- Khi cần nhờ AI đọc code và chỉ ra chính xác điểm nghi ngờ gây memory leak.
- Khi muốn chuẩn hóa quy trình debug để áp dụng cho nhiều component, hook hoặc module.
Hướng dẫn tùy biến
Thông tin nên cung cấp cho AI
- Phiên bản React, framework đi kèm nếu có như Next.js hoặc Vite.
- Đoạn code component, custom hook, provider hoặc context liên quan.
- Triệu chứng quan sát được: render lặp, CPU tăng, warning trong console, RAM tăng, request lặp.
- Các bước tái hiện lỗi, hành vi mong đợi và hành vi thực tế.
- Kết quả profiling nếu có từ React DevTools hoặc Performance tab.
Cách yêu cầu đầu ra chất lượng hơn
- Yêu cầu AI phân loại nguyên nhân theo mức độ chắc chắn: rất có khả năng, khả năng trung bình, cần thêm dữ liệu.
- Yêu cầu giải thích vì sao lỗi xảy ra dựa trên lifecycle, closure, dependency array, reference equality hoặc cleanup.
- Yêu cầu đề xuất bản sửa tối thiểu trước, sau đó mới đến phương án refactor.
- Yêu cầu checklist xác minh sau sửa để tránh sửa xong nhưng còn re-render ngầm.
Lưu ý
- Nên gửi phần code đủ ngữ cảnh thay vì chỉ một vài dòng rời rạc.
- Nếu ứng dụng dùng thư viện quản lý state hoặc data fetching như Redux, Zustand, React Query, hãy cung cấp thêm nơi subscribe hoặc invalidate dữ liệu.
- Không nên áp dụng máy móc mọi đề xuất tối ưu như memo hóa ở khắp nơi; cần cân nhắc chi phí và độ phức tạp.
- Với lỗi memory leak, hãy yêu cầu AI chỉ rõ tài nguyên nào được tạo ra, ở đâu cần cleanup và thời điểm cleanup phải diễn ra.
Nội dung Prompt
Có thể bạn quan tâm
Sản phẩm nổi bật
Quy trình tạo video selfie soi gương chân thực bằng AI
Giá gốc là: 199.000 ₫.99.000 ₫Giá hiện tại là: 99.000 ₫.
Quy trình tạo video selfie soi gương chân thực bằng AI 02
Giá gốc là: 199.000 ₫.99.000 ₫Giá hiện tại là: 99.000 ₫.
Quy trình tạo Video AI 3D chủ đề cây thuốc dân gian (thuốc nam)
Giá gốc là: 499.000 ₫.199.000 ₫Giá hiện tại là: 199.000 ₫.
Quy trình tạo video xây kênh triết lý sống phong cách hoạt hình, làm affiliate bán sách
Giá gốc là: 2.000.000 ₫.1.500.000 ₫Giá hiện tại là: 1.500.000 ₫.

