React.memo ne yapar ve ne zaman kullanmaya değer?

Question

Accepted Answer

`React.memo` bir bileşeni sarar, böylece **props'ları önceki render ile shallow-equal olduğunda yeniden renderlamayı atlar**. Varsayılan olarak, bir alt bileşen ana bileşeni render ettiğinde yeniden render edilir; `memo` props gerçekten değişmediğinde bunu kısaltır. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Neden önemli `memo` **shallow** bir karşılaştırma yapar. Ana bileşen her render'da yeni bir nesne/dizi/fonksiyon geçerse, karşılaştırma her zaman başarısız olur ve `memo` hiçbir şey yapmaz: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` `useCallback` ile fonksiyonu stabilize ederek düzeltin: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Kullanmaya değer olduğunda - Bir bileşen **sık sık** **aynı** prop'larla render edilir ve render'ı önemsiz değildir (büyük listeler, pahalı alt ağaçlar). ## Kullanmaya değer olmadığında - Çoğu bileşen ucuzdur; karşılaştırmanın kendisinin bir maliyeti vardır ve her şeyi sarmalamak fayda sağlamadan karmaşıklık ekler. **Önce profile yapın** React DevTools Profiler ile, ardından kanıtlanmış hotspot'ları memoize edin — kör gözle memoize etmeyin.