Derived state là gì và những vấn đề thường gặp?

Derived state là dữ liệu được tính toán từ props hoặc state đã có, không phải dữ liệu lưu trữ riêng. Thay vì copy props vào useState, bạn tính giá trị mỗi lần render.

Vấn đề thường gặp nhất là đồng bộ state với props: gán useState(props.data) rồi dùng useEffect để cập nhật khi props đổi. Cách này dễ sinh bug vì useEffect chạy sau render, nên UI hiển thị giá trị cũ ít nhất một frame. Ngoài ra, nếu props thay đổi nhanh hoặc nhiều lần trong cùng một lần render, effect có thể bỏ sót hoặc gây render thừa.

React khuyến nghị xử lý theo thứ tự ưu tiên:
- Tính trực tiếp trong render: nếu phép tính đơn giản, chỉ cần const fullName = ${user.firstName} ${user.lastName}` trước return. React tự tính lại mỗi khi props đổi, không cần state phụ.
- **Dùng useMemo:** nếu phép tính tốn kém (lọc danh sách lớn, sort), dùng useMemo với dependency là props liên quan. Nhớ rằng useMemo chỉ là tối ưu hiệu năng, không phải để đảm bảo đúng logic.
- **Dùng key để reset state:** nếu bạn thực sự muốn component có state nội bộ riêng và reset khi props thay đổi (ví dụ form theo userId), truyền key={userId}`. React sẽ huỷ component cũ và mount component mới, state tự reset.

Lỗi thường gặp khác là dùng getDerivedStateFromProps trong class component để "sửa" state theo props. API này dễ gây nhầm lẫn vì nó chạy cả khi state thay đổi, không chỉ khi props đổi.

Lưu ý: Nếu bạn thấy mình đang viết useEffect để setState theo props, hãy dừng lại và kiểm tra xem giá trị đó có thể tính trực tiếp trong render được không. Đa số trường hợp là được, và code sẽ đơn giản hơn nhiều.