Čo robí useMemo? Kedy ho použiť? Je potrebné obaliť detský komponent do React.memo?

useMemo — je hook v Reactu, ktorý umožňuje memoizovať (ukladať do cache) výsledok funkcie, aby sa predišlo zbytočným opakovaným výpočtom pri znovu-renderovaní komponentu.

Používajte useMemo, keď máte náročné výpočty alebo zložité objekty, ktoré by sa nemali zbytočne znovu vytvárať.

Príklad:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Tu bude computeExpensiveValue volané iba vtedy, ak sa zmenia a alebo b.

Čo sa týka React.memo — je to HOC, ktorý memoizuje samotný komponent, a zabraňuje jeho znovu-renderovaniu, ak sa props nezmenia.

Obaliť detský komponent do React.memo je vhodné, ak:

• sa komponent často renderuje,
• a props sa nemenia,
• a znovu-renderovanie komponentu je nákladné.

V skratke:

• useMemo optimalizuje výpočty vo vnútri komponentu,
• React.memo optimalizuje renderovanie detských komponentov.

Oba nástroje môžu byť použité spolu na zlepšenie výkonu, ale mali by sa používať len v prípade, že je to naozaj potrebné, aby sa nezbytočne nezložil kód.