A useMemo teljesítményoptimalizáló hook a React-ben

Az első teljesítményoptimalizáló hook, amit megvizsgálunk - a useMemo.

Ez a hook segít a számításigényes műveletek eredményeinek gyorsítótárazásában a képernyő újrarajzolásai között, és ennek megfelelően segíthet elkerülni a felesleges terjedelmes számításokat. Ezt a gyorsítótárazást memorizációnak is nevezik.

Nézzük meg, hogyan működik. Hozzunk létre egy komponenst egy gombbal és egy h3 címmel:

return (
	<div>
		<h3>Szöveg</h3>
		<button>kattintás</button>
	</div>
);

Most tegyük úgy, hogy a címre kattintva a színe narancsról zöldre változzon és vissza. Kezdjük azzal, hogy létrehozunk egy isGreen állapotot:

const [isGreen, setIsGreen] = useState(false);

Adjunk hozzá egy feltételt a cím style attribútumához a szín változtatásához, és rendeljünk hozzá kattintáskezelőt:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Szöveg</h3>

Legyen valamilyen értékünk is, amely a gombra kattintva eggyel növekszik. Hozzunk létre hozzá egy állapotot:

const [num, setNum] = useState(0);

Adjuk hozzá a gombra kattintás kezelését:

<button onClick={() => setNum(num + 1)}>
	kattintások
</button>

Legyen még egy square függvényünk, amely visszaadja a num érték négyzetét. A függvény hívásának eredményét egy result változóba írjuk:

const result = square(num);

function square(num) {
	return num * num;
}

Jelenítsük meg a result értékét a gomb szövegében:

<button onClick={() => setNum(num + 1)}>
	kattintások: {result}
</button>

Ennek eredményeképpen a következő történt: a gombra kattintva megváltozik a num értéke, amelyet aztán négyzetre emelünk, a címre kattintva pedig a cím színe változik.

Nagyon kis komponensünk van, minden gyorsan működik, annak ellenére, hogy a címre kattintva a szín megváltoztatásához az egész komponens újrarajzolódik, ennek megfelelően a gombhoz kapcsolódó számítások is újra megtörténnek, még akkor is, ha hozzá nem nyúltunk. Most pedig képzeld el, ha a számításaink terjedelmesek lennének és minden alkalommal minden újraszámításra kerülne.

Nehezítsük egy kicsit a függvényünket, most egy kicsit tovább fog "gondolkodni". Így szimuláljuk a hosszú számításokat:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Csak semmit se csinál...
	}
	
	return num * num;
}

Most kattintsgass a címen. Kiderült, hogy a square függvény lassú működése miatt (de hozzá még nem is nyúltunk a gombhoz!) egy örökkévalóságot kell várnunk, hogy a cím színe megváltozzon!

Itt jön a segítségünkre a useMemo hook. Ehhez az első paraméterként át kell adnunk egy függvényt, amely kiszámolja a gyorsítótárazni kívánt értéket; ennek a függvénynek tiszta függvénynek kell lennie és nem fogadhat paramétereket. A második paraméterként pedig a függőségeket szögletes zárójelben, más szóval minden reaktív értéket, amely részt vesz a függvény kódjában. Így a result beírjuk a következő konstrukciót:

const result = useMemo(() => square(num), [num]);

Kattintsgassunk újra a címen. Most, ha nem nyúlunk a számításokat tartalmazó gombhoz és így nem változtatjuk meg a num állapot értékét, akkor semmi nem számolódik újra, és a React a gyorsítótárazott értéket jeleníti meg a gombon, ezért a címet gyorsan megváltoztatja a színét.

Hozz létre egy App komponenst, helyezz el benne egy bekezdést. Hozz létre egy text állapotot 'react' kezdőértékkel, az állapot értéke jelenjen meg a bekezdés szövegében. A bekezdésre kattintva a szöveg végére kerüljön egy felkiáltójel.

Hozz létre még egy num állapotot, 0 kezdőértékkel. Helyezz el a App-ben még egy bekezdést. Ügyelj arra, hogy rá kattintva a num értéke 1-gyel növekedjen.

Most adj hozzá a App-hez egy triple függvényt, amely paraméterként fogadja a num-ot és visszaadja a háromszorosát. Helyezd el a függvény hívásának eredményét egy result változóban. Jelenítsd meg a result értékét a második bekezdés szövegében. Kattintsgass felváltva a bekezdésekre, figyeld meg, milyen lassan kerülnek hozzá a felkiáltójelek.

Javítsd a helyzetet a lassú triple függvény useMemo-ba való becsomagolásával.