Huku i Optimizimit të Performancës useMemo në React

Huku i parë për optimizimin e performancës që do të shqyrtojmë është useMemo.

Ky huk ndihmon në kachedimin e rezultateve të operacioneve intensive në burime midis momenteve të rivizatimit të ekranit dhe në përputhje me rrethanat mund të ndihmojë në shmangien e llogaritjeve të panevojshme voluminoze. Ky lloj kachedimi quhet gjithashtu memorizim.

Le të shohim se si funksionon. Le të krijojmë një komponent me një buton dhe një titull h3:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

Tani le ta bëjmë që me klikim në titull, ngjyra e tij të ndryshojë nga portokalli në të gjelbër dhe anasjelltas. Për fillim le të krijojmë një state isGreen:

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

Le të shtojmë në atributin style të titullit kushtin e ndryshimit të ngjyrës dhe të lidhim trajtimin e klikimit:

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

Le të kemi edhe një vlerë që do të rritet me një me çdo klik në butonin tonë. Le të krijojmë për të një state:

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

Le të shtojmë trajtimin e klikimit në buton:

<button onClick={() => setNum(num + 1)}>
	klikime
</button>

Le të kemi gjithashtu një funksion square, i cili do të kthejë katrorin e vlerës num. Rezultatin e thirrjes së funksionit do ta shkruajmë në ndryshoren result:

const result = square(num);

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

Le të shfaqim result në tekstin e butonit:

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

Si rezultat, kemi marrë sa vijon: me klikim në buton ndryshon vlera num, e cila më pas ngrihet në katror, dhe me klikim në titull ndryshon ngjyra e titullit.

Komponenti ynë është shumë i vogël, gjithçka funksionon shpejt, pavarësisht se me klikim në titull për të ndryshuar ngjyrën e tij, i gjithë komponenti rivizohet përsëri, prandaj ndodhin përsëri edhe llogaritjet, që lidhen me butonin, kjo edhe kur nuk e kemi prekur atë. Dhe tani imagjinoni nëse llogaritjet tona do të ishin voluminoze dhe gjithçka do të rillogaritej përsëri çdo herë.

Le ta rëndojmë pak funksionin tonë, tani do të "mendojë" pak më gjatë. Në këtë mënyrë do të imitojmë llogaritje të gjata:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Thjesht mos bëj asgjë ...
	}
	
	return num * num;
}

Tani klikoni në titull. Rezulton se tani për shkak të punës së gjatë të funksionit square (dhe ne nuk e prekim butonin) ne duhet të presim një jetë të tërë që të ndryshojë ngjyra e titullit!

Këtu na vjen në ndihmë huku useMemo. Për këtë, ne duhet si parametër të parë të kalojmë një funksion, i cili llogarit vlerën që duam ta kachesojmë, ky funksion duhet të jetë i pastër dhe të mos pranojë parametra. Dhe si parametër të dytë - varësitë në kllapa katrore, me fjalë të tjera, të gjitha vlerat reaktive që marrin pjesë në kodin e funksionit. Kështu, në result ne tani do të shkruajmë një konstrukt të tillë:

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

Le të klikojmë përsëri në titull. Tani, nëse nuk e prekim butonin me llogaritjet dhe nuk e ndryshojmë kështu vlerën e state num, atëherë asgjë nuk rillogaritet, dhe React shfaq vlerën e kachedizuar në buton, prandaj titulli ynë e ndryshon shpejt ngjyrën e tij.

Krijoni një komponent App, vendoseni në të një paragraf. Krijoni një state text me vlerë fillestare 'react', le të shfaqet vlera e state si tekst i paragrafit. Le të jetë që me klikim në paragraf, në fund të tekstit i shtohet një pikëçuditëse.

Krijoni një state tjetër num, me vlerë fillestare 0. Vendoseni në App një paragraf tjetër. Bëni që, me klikim në të num të rritet me 1.

Dhe tani shtoni në App funksionin triple, i cili si parametër pranon num dhe kthen vlerën e tij të trefishuar. Vendoseni rezultatin e thirrjes së funksionit në ndryshoren result. Shfaqni result si tekst të paragrafit të dytë. Klikoni me radhë në paragrafë, vëreni se sa ngadalë shtohen pikëçuditëset.

Rregulloni situatën, duke mbështjellë funksionin e ngadaltë triple në useMemo.