Nội dung

26.6. React JS Quiz App - Cleanup function ngăn lỗi logic và leak bộ nhớ

Trong video bài 26.6 này chúng ta sẽ tìm hiểu một khái niệm rất quan trọng khi làm việc với ReactJS, đó là Cleanup function. Đây là phần thường bị bỏ qua khi mới học nhưng lại có vai trò quyết định trong việc đảm bảo ứng dụng chạy ổn định, tránh rò rỉ bộ nhớ và ngăn chặn các lỗi logic khó tìm. Khi sử dụng useEffect, đôi khi chúng ta tạo ra các side effect như setTimeout hay setInterval. Nếu không xử lý đúng cách, những hiệu ứng này vẫn tiếp tục chạy ngay cả khi component đã bị gỡ bỏ, dẫn đến việc ứng dụng hoạt động sai mong muốn hoặc tiêu tốn tài nguyên không cần thiết. Trong video, bạn sẽ được giải thích tại sao Cleanup function cần thiết và cách mà nó giúp ứng dụng trở nên an toàn hơn. Chúng ta sẽ phân tích một ví dụ cụ thể khi không có Cleanup function, bạn sẽ thấy thời gian hiển thị hoặc bộ đếm chạy nhanh gấp đôi so với bình thường. Điều này xuất hiện do Strict Mode trong ReactJS khiến hiệu ứng được gọi lại hai lần, và nếu không cleanup thì hiệu ứng cũ vẫn tồn tại song song với hiệu ứng mới. Đây là tình huống điển hình gây ra lỗi logic mà nhiều người mới học thường gặp. Bạn cũng sẽ học cách tư duy về vòng đời của một component. Khi component được tạo ra, các hiệu ứng đi kèm sẽ bắt đầu hoạt động. Khi component bị gỡ bỏ hoặc render lại, các hiệu ứng cũ phải được dọn dẹp trước khi khởi tạo hiệu ứng mới. Cleanup function chính là công cụ giúp bạn làm điều đó. Việc nắm rõ quy tắc này giúp bạn kiểm soát tốt hơn ứng dụng của mình và tránh các lỗi ngầm khó phát hiện. Ngoài ra, video cũng nhấn mạnh rằng Cleanup function không chỉ để ngăn rò rỉ bộ nhớ, mà còn đảm bảo ứng dụng hoạt động chính xác trong nhiều môi trường khác nhau. Ở chế độ Strict Mode, React cố tình gọi lại các hiệu ứng nhiều lần để phát hiện lỗi. Nếu bạn viết logic đúng kèm với Cleanup function, ứng dụng sẽ luôn ổn định, bất kể Strict Mode có được bật hay không. Sau khi hoàn thành bài học này, bạn sẽ hiểu rõ hơn cách kết hợp giữa useEffect và Cleanup function để xử lý các side effect một cách an toàn. Bạn cũng sẽ biết cách áp dụng nó vào dự án Quiz App, nơi chúng ta sử dụng bộ đếm thời gian và cần kiểm soát chặt chẽ vòng đời của component. Đây là kiến thức nền tảng, không chỉ áp dụng cho Quiz App mà còn hữu ích trong bất kỳ ứng dụng ReactJS nào có liên quan đến timer, sự kiện hoặc kết nối với API. Kết thúc video, bạn sẽ thấy ứng dụng Quiz App không chỉ chạy đúng mà còn mượt mà và ổn định hơn rất nhiều. Đây là một bước tiến quan trọng trong quá trình học ReactJS, vì nó giúp bạn rèn luyện thói quen viết code sạch, an toàn và dễ bảo trì. Cleanup function chính là chìa khóa để kiểm soát hiệu ứng trong ReactJS, và hiểu rõ nó sẽ giúp bạn tự tin hơn khi phát triển các ứng dụng thực tế.