Khi nào `memo`, `useMemo`, `useCallback` thật sự có ích?

Điều cần hiểu để dùng đúng: memo so sánh props bằng Object.is theo từng trường. Nên nếu bạn truyền một object hoặc mảng dựng inline (style={{…}}, items={[…]}), tham chiếu mới mỗi lần render và memo không bao giờ chặn được gì. Đây là lý do rất nhiều memo trong codebase thật hoàn toàn không có tác dụng, và người viết không biết vì không ai đo.

Chi phí của việc ghi nhớ cũng thật: mỗi useMemo giữ giá trị cũ trong bộ nhớ, so sánh mảng phụ thuộc mỗi lần render, và thêm một dòng cần đọc hiểu. Với một phép tính rẻ, so sánh phụ thuộc có thể tốn hơn chính phép tính. Vì thế react.dev nói thẳng rằng đây là tối ưu hoá hiệu năng, không phải mặc định — và cách chữa tốt nhất thường là cấu trúc lại component chứ không phải bọc thêm.

Cách cấu trúc lại hiệu quả nhất mình biết là đưa state XUỐNG chỗ dùng nó, hoặc truyền children thay vì render bên trong. Một component cha giữ state gõ phím sẽ re-render toàn bộ cây con mỗi ký tự; tách phần input ra thành component riêng thì phần còn lại không render lại, và bạn không cần memo nào cả. React Compiler (React 19) tự động hoá phần lớn việc này, nên biết nguyên lý còn có ích hơn biết cú pháp.