Bạn dùng `useEffect` cho việc gì, và khi nào KHÔNG nên dùng?

Mẫu sai phổ biến nhất là “state dẫn xuất”: có items và query, rồi một effect lọc items và ghi vào filtered. Nó tạo hai lần render mỗi lần gõ phím, mở ra cửa sổ mà filtered chưa khớp với items, và thêm một nguồn sự thật thứ hai có thể lệch. Chỉ cần const filtered = items.filter(…) ngay trong thân component; nếu phép lọc thật sự đắt thì bọc useMemo, nhưng chỉ sau khi đo.

Mẫu sai thứ hai là dùng effect để phản ứng với sự kiện người dùng: bấm nút thì đặt một state submitted, rồi một effect thấy submitted đổi và gửi request. Cái này biến một hành động rõ ràng thành một chuỗi nhân quả phải đọc ngược. Logic thuộc về sự kiện thì viết trong handler của sự kiện đó — đơn giản hơn, dễ đọc hơn, và không phụ thuộc vào chu kỳ render.

Về StrictMode chạy hai lần: nó không phải bug và không xảy ra ở production. Nó cố tình mount–unmount–mount để phơi bày effect thiếu hàm dọn dẹp. Nếu effect của bạn chạy hai lần mà gây vấn đề, gần như chắc chắn bạn đang thiếu cleanup — và cùng vấn đề đó sẽ xảy ra ở production khi component mount lại vì lý do khác.