Quay lại danh sách case study
Xử lý lỗi rò rỉ bộ nhớ từ bộ đếm thời gian trong React
Ứng viên xử lý tình huống component bị unmount nhưng setInterval vẫn chạy ngầm gây tốn tài nguyên.
Bối cảnh
Trong một dự án thương mại điện tử đơn giản dùng React, team phát hiện trang chi tiết sản phẩm bị chậm dần và báo cáo cảnh báo memory leak khi người dùng chuyển trang liên tục.
Vấn đề cần xử lý
Hàm setInterval dùng để đếm ngược thời gian khuyến mãi trong component ChiTietSanPham không được dọn dẹp khi component bị hủy (unmount), dẫn đến việc bộ đếm tiếp tục chạy và tham chiếu tới state của component cũ.
Hướng xử lý đề xuất
Sử dụng hàm cleanup trong hook useEffect để gọi clearInterval khi component unmount nhằm giải phóng tài nguyên.
Câu trả lời mẫu khi phỏng vấn
Dạ thưa anh, khi em gặp lỗi này, việc đầu tiên em kiểm tra là hook useEffect có đang gọi setInterval hay không. Nguyên nhân là do component đã bị unmount nhưng bộ đếm vẫn tiếp tục chạy và cố gắng cập nhật state. Cách giải quyết là trong useEffect, em sẽ trả về một hàm cleanup chứa lệnh clearInterval(timerId) để hủy bỏ tiến trình này ngay khi component biến mất.
Trade-off
Việc dọn dẹp bộ đếm giúp tiết kiệm bộ nhớ rõ rệt nhưng đòi hỏi lập trình viên phải chú ý cẩn thận đến mảng dependency của useEffect để tránh việc hook chạy lại không mong muốn.
Kết quả kỳ vọng
Ứng dụng hoạt động mượt mà trở lại, không còn cảnh báo memory leak trên công cụ developer tools của trình duyệt.
Bài học khi trả lời phỏng vấn
Luôn luôn nhớ dọn dẹp các tài nguyên như timer, event listener, hoặc kết nối websocket bên trong hàm cleanup của useEffect khi làm việc với React.