You Might Not Need an Effect & useEffectEvent

Loại bỏ effect dùng sai cho derived state/event và tách logic không reactive khỏi effect bằng useEffectEvent.

Core Mental Model

Effect chỉ để đồng bộ React với một hệ thống bên ngoài sau render. Tính dữ liệu cho UI diễn ra trong render; xử lý hành động người dùng diễn ra trong event handler. Effect Event cho phép effect gọi logic luôn đọc props/state mới nhất mà không biến logic đó thành dependency reactive.

Key Takeaways & Principles

Không dùng Effect để tính derived data từ props/state; tính trực tiếp trong render và chỉ memoize khi profiling cho thấy phép tính đắt.

Không dùng Effect để phản ứng với click/submit; event handler biết chính xác event nào đã xảy ra.

Dùng `useEffectEvent` cho phần logic được effect gọi nhưng không nên làm effect reconnect/re-subscribe khi giá trị đọc bên trong đổi.

Không dùng Effect Event để che dependency thật; chỉ tách phần không reactive và chỉ gọi Effect Event từ Effect.

React Hooks Mastery

intermediate

20 phút

#useEffect

#useEffectEvent

#Derived State

#React