Codebase cũ dùng `React.PureComponent` — chuyển sang function component thì thay bằng gì, và có tương đương hoàn toàn không?

Thay bằng React.memo, nhưng hai thứ không phủ nhau hoàn toàn: PureComponent so cả props lẫn state, còn memo chỉ so props.

PureComponent là class kế thừa thay cho Component, tự cài sẵn shouldComponentUpdate bằng phép so sánh nông trên this.props và this.state. memo là higher-order component bọc bên ngoài, và nó không biết gì về state bên trong:

// Trước
class Row extends React.PureComponent { ... }

// Sau
const Row = React.memo(function Row(props) { ... })

Ba khác biệt cần biết khi chuyển:

• Phạm vi so sánh. Với function component, state nằm trong useState; mọi lần gọi setter đều render lại bất kể memo. memo chỉ chặn re-render đến từ cha. Trong bản class, PureComponent chặn được cả hai đường.
• Chỗ đặt. PureComponent gắn vào chính class. memo bọc ở ngoài, nên nếu bạn export component chưa bọc rồi bọc ở nơi khác, phần còn lại của ứng dụng vẫn dùng bản không memo hoá.
• Tuỳ biến phép so sánh. Class dùng shouldComponentUpdate viết tay. memo nhận đối số thứ hai: memo(Row, (prev, next) => prev.id === next.id).

Điểm chung là cả hai đều so sánh nông, nên cả hai cùng mất tác dụng khi cha truyền xuống object hoặc hàm dựng mới ở mỗi lần render. Chuyển từ PureComponent sang memo mà quên useCallback cho prop hàm là cách phổ biến khiến "tối ưu" xong lại chậm hơn trước.

Lưu ý: Đừng chuyển máy móc từng class một. PureComponent trong code cũ thường được dùng vô điều kiện chứ không vì đo được gì; sang function component, cứ để component render bình thường trước, chỉ bọc memo ở chỗ React DevTools Profiler chỉ ra là tốn.