React.memo একটি উপাদানকে মোড়ায় যাতে এটি যখন এর প্রপস আগের রেন্ডারের সাথে শ্যালো-সমান হয় তখন পুনরায় রেন্ডার করা এড়ায়। ডিফল্টভাবে একটি চাইল্ড উপাদান প্রতিবার তার প্যারেন্ট পুনরায় রেন্ডার হওয়ার সময় পুনরায় রেন্ডার হয়; memo যখন প্রপস আসলে পরিবর্তিত হয়নি তখন এটি আটকে দেয়।
= .( () {
;
});
memo একটি শ্যালো তুলনা করে। যদি প্যারেন্ট প্রতিটি রেন্ডারে একটি নতুন অবজেক্ট/অ্যারে/ফাংশন পাস করে, তুলনা সবসময় ব্যর্থ হয় এবং 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} />);