React.memo ห่อหุ้มคอมโพเนนต์เพื่อ ข้ามการ re-render เมื่อ props ของมันเป็น shallow-equal กับการ render ครั้งก่อนหน้า โดยค่าเริ่มต้น child จะ re-render ทุกครั้งที่ parent ทำการ render; memo ขัดขวางสิ่งนั้นเมื่อ props ไม่ได้เปลี่ยนแปลงจริง ๆ
= .( () {
;
});
memo ทำการเปรียบเทียบ shallow หากคิว่าซ์ parent ส่งอบเจกต์/อาร์เรย์/ฟังก์ชันใหม่ในแต่ละการ render การเปรียบเทียบจะล้มเหลวเสมอและ memo ไม่ทำอะไร:
function List({ items }) {
// ❌ a NEW function every render → Row's onSelect prop always "changes"
return items.map(i => <Row key={i.id} item={i} onSelect={id => pick(id)} />);
}
แก้ไขโดยการทำให้ฟังก์ชันมีความเสถียรด้วย useCallback:
const onSelect = useCallback(id => pick(id), []); // same reference across renders
return items.map(i => <Row key={i.id} item={i} onSelect={onSelect} />);