ماذا يفعل React.memo ومتى يكون من المفيد استخدامه؟

Question

Accepted Answer

`React.memo` يغلف مكون بحيث **يتخطى إعادة التصيير عندما تكون خصائصه متساوية بشكل سطحي** للعرض السابق. بشكل افتراضي، يعاد تصيير المكون الفرعي في كل مرة يعاد فيه تصيير المكون الأب؛ `memo` يختصر هذا عندما لم تتغير الخصائص بالفعل. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## المشكلة: يحتاج إلى خصائص مستقرة `memo` يقوم بمقارنة **سطحية**. إذا كان المكون الأب يمرر كائن/مصفوفة/دالة جديدة في كل عرض، تفشل المقارنة دائماً و`memo` لن يفعل شيئاً: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` احل المشكلة بجعل الدالة مستقرة باستخدام `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## متى يكون من المفيد - مكون يعاد تصييره **بشكل متكرر** مع **نفس** الخصائص وعملية التصيير غير تافهة (قوائم كبيرة، أشجار فرعية مكلفة). ## متى لا يكون - معظم المكونات رخيصة؛ المقارنة نفسها لها تكلفة، وتغليف كل شيء يضيف تعقيداً بدون فائدة. **استخدم أداة القياس أولاً** مع React DevTools Profiler، ثم غلف النقاط الفعلية المثبتة — لا تغلف بعشوائية.