Co dělá React.memo a kdy se vyplatí jej používat?

Question

Accepted Answer

`React.memo` obalí komponentu tak, aby **přeskočila re-render, když jsou její props shallow-equal s předchozím renderem**. Ve výchozím nastavení se dítě re-renderuje pokaždé, když se re-renderuje jeho rodič; `memo` to zkrátí, když se props ve skutečnosti nezměnily. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Catch: potřebuje stabilní props `memo` dělá **shallow** porovnání. Pokud nadřazená komponenta předá nový objekt/pole/funkci při každém renderu, porovnání vždy selže a `memo` nedělá nic: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Opravte stabilizací funkce pomocí `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Kdy se to vyplatí - Komponenta se renderuje **často** se **stejnými** props a její render je non-trivial (velké seznamy, drahé podstromy). ## Kdy se to nevyplatí - Většina komponent je levná; samotné porovnání má cenu a obalování všeho přidává složitost bez prospěchu. **Nejdříve profilujte** pomocí React DevTools Profileru, pak memoizujte prokázané hotspoty — nememoizujte slepě.