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

Derived State là những state được tính toán (bắt nguồn) từ props truyền vào.

Vấn đề thường gặp (Anti-pattern):
Nhiều lập trình viên có thói quen copy props vào state (ví dụ: gán useState(props.data)) hoặc lạm dụng getDerivedStateFromProps / useEffect để đồng bộ data. Điều này rất dễ gây ra bug khi props thay đổi nhưng state không được cập nhật kịp thời, dẫn đến UI bị "mất đồng bộ".

Giải pháp React khuyến nghị:
- Tính toán trực tiếp trong lúc render: Nếu tính toán đơn giản, hãy tính thẳng nó ra một biến trước hàm return.
- Sử dụng useMemo: Nếu tính toán nặng, hãy dùng useMemo để cache lại kết quả dựa trên props.
- Dùng key để reset state: Nếu bạn thực sự muốn reset lại toàn bộ state nội bộ của một component khi props (như id) thay đổi, hãy truyền key={id} cho component đó.