Mit csinál a React.memo és mikor érdemes használni?

Question

Accepted Answer

`React.memo` egy komponenst burkolja, hogy **kihagyja az újrarenderelést, ha a prop-jaiak sekélyen egyenlőek az előző rendereléshez képest**. Alapértelmezés szerint a gyermek újrarenderelődik, amikor a szülőjét; `memo` meghiúsítja ezt, amikor a prop-ok valóban nem változtak. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## A fogás: stabil prop-ok szükségesek `memo` egy **sekély** összehasonlítást végez. Ha a szülő minden rendereléskor új objektumot/tömböt/függvényt ad át, az összehasonlítás mindig sikertelen, és `memo` nem csinál semmit: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Javítsa ki a függvény stabilizálásával `useCallback` segítségével: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Mikor érdemes - A komponens **gyakran** újrarenderelődik **ugyanaz** prop-okkal, és az újrarendelése nem triviális (nagy listák, költséges részfák). ## Mikor nem - A legtöbb komponens olcsó; az összehasonlításnak van saját költsége, és mindent becsomagolni összetettséget ad haszon nélkül. **Először profilozza** a React DevTools Profiler-rel, majd memorizálja a bizonyított hotspot-okat — ne memorizálja vakon.