Mental Model useEffect: Đồng Bộ Dữ Liệu & Cleanup Chuẩn

Từ bỏ thói quen coi useEffect là Lifecycle methods; học cách dùng useEffect để đồng bộ với hệ thống bên ngoài và xử lý race condition.

Core Mental Model

useEffect không phải là 'ComponentDidMount'. useEffect dùng để ĐỒNG BỘ (Synchronize) component với một hệ thống bên ngoài React (Browser API, WebSocket, Third-party widget). Không dùng useEffect cho việc tính toán dữ liệu nội bộ có thể suy ra từ Props/State.

Key Takeaways & Principles

Nếu một biến có thể tính toán được từ Props hoặc State hiện tại, hãy tính trực tiếp trong quá trình render thay vì lưu thêm State và gọi useEffect.

Cleanup function chạy trước mỗi lần re-run effect và khi component unmount, cực kỳ quan trọng để dọn dẹp timers, event listeners và abort fetch requests.

Xử lý Race Condition khi fetch dữ liệu bất đồng bộ bằng cờ `ignore = true` hoặc `AbortController`.

React Hooks Mastery

intermediate

18 phút

#useEffect

#Synchronization

#Cleanup