Quay lại danh sách case study
Lỗi Memory Leak do chưa hủy Event Listener
Khắc phục hiện tượng ứng dụng ngày càng chậm dần sau thời gian dài sử dụng do rò rỉ bộ nhớ.
Bối cảnh
Ứng dụng Single Page Application có các component lắng nghe sự kiện window resize.
Vấn đề cần xử lý
Khi người dùng chuyển trang liên tục, các component cũ bị unmount nhưng các event listener trên window vẫn còn tồn tại, gây rò rỉ bộ nhớ.
Hướng xử lý đề xuất
Đảm bảo luôn hủy đăng ký (removeEventListener) trong hàm cleanup của useEffect hoặc componentWillUnmount.
Câu trả lời mẫu khi phỏng vấn
Em đã sử dụng công cụ Memory Profiler trong Chrome DevTools để phát hiện các listener không được giải phóng. Sau đó, em bổ sung logic cleanup trong hàm hủy của component để gỡ bỏ hoàn toàn sự kiện khi component biến mất.
Trade-off
Cần chú ý viết code cẩn thận hơn ở các vòng đời component, thêm một vài dòng code dọn dẹp nhưng đổi lại hiệu năng ổn định lâu dài.
Kết quả kỳ vọng
Ứng dụng chạy mượt mà trong thời gian dài, không bị tăng RAM bất thường.
Bài học khi trả lời phỏng vấn
Nắm vững vòng đời của component và ý thức bảo vệ tài nguyên bộ nhớ trình duyệt.