Ką daro useMemo? Kada jį naudoti? Ar reikia apvynioti vaiko komponentą į React.memo?

useMemo — tai React hook, kuris leidžia įsiminti (kaupti) funkcijos rezultatą, siekiant išvengti nereikalingų pakartotinių skaičiavimų komponento perrenderinimo metu.

Naudokite useMemo, kai turite brangius išteklius reikalaujančius skaičiavimus arba sudėtingus objektus, kurie neturėtų būti iš naujo kurti be reikalo.

Pavyzdys:

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

Čia computeExpensiveValue bus iškviesta tik tada, kai pasikeis a arba b.

Kalbant apie React.memo — tai HOC, kuris įsimena patį komponentą ir neleidžia jam pakartotinai perrenderinti, jei props nesikeičia.

Apvyniokite vaiko komponentą React.memo, jei:

• komponentas dažnai renderinamas,
• ir props nesikeičia,
• ir komponento perrenderinimas yra brangus.

Apibendrinant:

• useMemo optimizuoja vidinius skaičiavimus,
• React.memo optimizuoja vaikų komponentų renderinimą.

Abu įrankiai gali būti naudojami kartu, siekiant pagerinti našumą, tačiau juos reikėtų taikyti tik tada, kai tai tikrai būtina, kad neapsunkintumėte kodo.