Ce face useMemo? Când trebuie să-l folosești? Este necesar să înfășori componenta copil în React.memo?

useMemo — este un hook în React care permite memorarea (cache-ul) rezultatului unei funcții pentru a evita recalculările inutile în timpul rerenderizării componentului.

Se recomandă utilizarea useMemo atunci când aveți calcule costisitoare sau obiecte complexe care nu trebuie recreate fără nevoie.

Exemplu:

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

Aici, computeExpensiveValue va fi apelată doar dacă a sau b se schimbă.

În ceea ce privește React.memo — este un HOC care memorizează componenta în sine, prevenind rerenderizarea acesteia dacă props-urile nu s-au schimbat.

Este recomandat să înveliți componenta copil în React.memo dacă:

• componenta se re-renderizează frecvent,
• și props-urile nu se schimbă,
• și rerenderizarea componentei este costisitoare.

Pe scurt:

• useMemo optimizează calculele interne ale componentei,
• React.memo optimizează rerenderizarea componentelor copil.

Ambele instrumente pot fi folosite împreună pentru a îmbunătăți performanța, dar trebuie aplicate doar dacă este cu adevărat necesar pentru a nu complica codul.