React.memo làm gì và khi nào đáng dùng?

Question

Accepted Answer

`React.memo` bọc một component để nó **bỏ qua render lại khi props bằng nhau theo so sánh nông (shallow-equal)** so với lần render trước. Mặc định một con render lại mỗi khi cha của nó render; `memo` ngắt mạch điều đó khi props thực sự không thay đổi. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // chỉ render lại khi tham chiếu `item` hoặc `onSelect` thay đổi return

onSelect(item.id)}>{item.name}

; }); ``` ## Cái bẫy: nó cần props ổn định `memo` so sánh **nông**. Nếu cha truyền một object/array/function mới mỗi render, so sánh luôn thất bại và `memo` không làm gì: ```jsx function List({ items }) { // ❌ một function MỚI mỗi render → prop onSelect của Row luôn "thay đổi" return items.map(i => pick(id)} />); } ``` Sửa bằng cách ổn định hóa function với `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // cùng tham chiếu qua các render return items.map(i => ); ``` ## Khi nào đáng dùng - Một component render **thường xuyên** với **cùng** props và render của nó không tầm thường (danh sách lớn, cây con tốn kém). ## Khi nào không - Hầu hết component đều rẻ; chính việc so sánh có chi phí, và bọc mọi thứ thêm phức tạp mà không lợi ích. **Profile trước** với React DevTools Profiler, rồi memoize các điểm nóng đã chứng minh — đừng memoize mù quáng.