Observer Pattern thường được sử dụng để xây dựng hệ thống Event-Driven. Làm thế nào để xử lý vấn đề Memory Leak khi đăng ký các Listener trong các ứng dụng Single Page Application (SPA) quy mô lớn?

Question

Accepted Answer

Vấn đề Memory Leak
Trong các ứng dụng SPA, khi các Component bị hủy (unmount) nhưng các Listener vẫn còn tồn tại trong Event Bus hoặc Global Store, chúng sẽ giữ tham chiếu đến Component đó, ngăn cản Garbage Collection hoạt động.
Giải pháp tối ưu

Luôn thực hiện Unsubscribe: Sử dụng lifecycle hooks (như componentWillUnmount trong React hoặc onDestroy trong Angular) để hủy đăng ký.
Sử dụng WeakMap hoặc WeakRef: Để lưu trữ các tham chiếu đến các listener, giúp Garbage Collector có thể thu hồi bộ nhớ khi đối tượng không còn được sử dụng ở nơi khác.
Sử dụng mô hình Event Emitter với cơ chế tự động dọn dẹp (Cleanup function).

Ví dụ thực chiến
useEffect(() => {
  const handler = () => { /* logic */ };
  eventBus.on('data', handler);
  return () => eventBus.off('data', handler); // Cleanup quan trọng
}, []);

Observer Pattern thường được sử dụng để xây dựng hệ thống Event-Driven. Làm thế nào để xử lý vấn đề Memory Leak khi đăng ký các Listener trong các ứng dụng Single Page Application (SPA) quy mô lớn?

Vấn đề Memory Leak

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi design pattern liên quan cùng chủ đề