Debug ứng dụng React bị render lặp và rò rỉ bộ nhớ

Lượt xem 29
AI sử dụng
ChatGPT Gemini Claude

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

  1. 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.
  2. 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.
  3. Yêu cầu đề xuất bản sửa tối thiểu trước, sau đó mới đến phương án refactor.
  4. 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

Bạn cần đăng nhập để xem đầy đủ nội dung Prompt.

Có thể bạn quan tâm

Sản phẩm nổi bật