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

Në këtë mësim do të shqyrtojmë hukun e mëposhtëm për optimizimin e performancës useCallback.

Huku useCallback është i ngjashëm me API-n useMemo, ndryshimi qëndron në faktin se i pari fletën e vlerave midis momenteve të rivizatimit të ekranit, ndërsa i dyti - callback. Kjo na lejon të mos rinisim funksionet me kosto burrimesh kur nuk kërkohet dhe mund të përdoret kur kalojmë një funksion në komponentët fëmijë.

Le ta kuptojmë më në detaje me një shembull. Së pari le të krijojmë një komponent App dhe të krijojmë në të një state num:

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

Le të kemi një buton, me klik mbi të cilin num rritet me 1, dhe një paragraf, ku ne do të shfaqim vlerën num:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>kliko</button>
		<p>klikime: {num}</p>
	</div>
);

Tani, le të supozojmë se në App shfaqet një listë tjetër me elemente, të cilën do ta plotësojmë duke shtypur një buton tjetër. Për ruajtjen e elementeve të kësaj liste do të krijojmë state items:

const [items, setItems] = useState([]);

Dhe pastaj do të shkruajmë funksionin addItem për shtimin e tyre:

function addItem() {
	setItems([...items, 'new item']);
}

Tani le të shkruajmë kodin për shfaqjen e elementeve të listës dhe ta zhvendosim atë në komponentin fëmijë Items, i cili në formën e props do të marrë një grup elementësh dhe një funksion për shtimin e tyre. Le të mos harrojmë shtimin e shfaqjes në konsol, për të parë kur Items ynë do të rivizatohet:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items render');
	
	return (
		<div>
			<h3>Artikujt tanë</h3>
			{result}
			<button onClick={addItem}>shto artikull</button>
		</div>
	);
}

export default Items;

Le të vendosim Items në fund të komponentit App dhe t'i kalojmë atij grupin items dhe funksionin për shtimin e elementeve addItem:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>kliko</button>
			<p>klikime: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

Tani le të klikojmë butonat dhe të bindemi se num rritet dhe elementët e rinj shtohen në listë. Dhe duke hapur konsolën, do të shohim se lista jonë rivizatohet çdo herë, edhe nëse klikojmë në butonin që rrit num.

Nëse kemi një listë të vogël, atëherë gjithçka është në rregull, por çka nëse supozohet se ajo do të jetë e madhe dhe ka shumë gjëra atje? S'ka problem - do të thoni ju, sepse në mësimin e kaluar ne shqyrtuam API-n memo, për të shmangur rivizatimet e panevojshme të komponentit.

Pra, le të mbështjellim komponentin tonë Items në memo dhe të gjitha gjërat. Meqë ra fjala, kjo mund të bëhet direkt gjatë eksportit të Items:

export default memo(Items);

Le të mos harrojmë të importojmë memo:

import { memo } from 'react';

Tani le të hapim konsolën dhe të klikojmë butonat. Të gjitha përpjekjet janë kot! Ne e kemi memorizuar komponentin, por kur shtypim butonin 'kliko' komponenti Items prapëseprapë rivizatohet çdo herë.

Çështja është se kur komponenti prind rivizatohet, funksionet e tij rikrijohen përsëri - kjo vlen edhe për funksionin tonë addItem, të cilin e kalojmë në Items.

Është pikërisht në këtë moment që na ndihmon huku useCallback. Le ta aplikojmë atë. Së pari le ta importojmë atë në App:

import { useCallback } from 'react';

Pastaj le ta transformojmë deklarimin e thjeshtë të funksionit addItem në Shprehje Funksioni, të tregojmë si parametër të parë për useCallback funksionin tonë në formën e një callback. Parametrin e dytë në kllapa katrore do ta tregojmë varësitë - të gjitha variablat reaktivë, që marrin pjesë në funksion, në rastin tonë ky është grupi items:

const addItem = useCallback(() => {
	setItems(() => [...items, 'New item']);
}, [items]);

Gati! Kështu ne e kemi fshehur funksionin. Klikojmë përsëri butonat dhe shohim se tani kur shtypim butonin 'kliko' komponenti ynë fëmijë nuk rivizatohet.

Krijoni një komponent App, vendosni në të një paragraf me tekst. Krijoni state me vlerë fillestare 'tekst' dhe shfaqeni atë në paragraf. Le të jetë me klik në paragraf, në fund të tekstit i shtohet një pikëçuditëse.

Krijoni një komponent fëmijë Products, ku do të keni një buton për shtimin e një produkti të ri. Vendoseni atë në App. Në komponentin prind krijoni state me një grup produktesh dhe funksionin e shtimit të një produkti të ri. Kaloji ato në komponentin fëmijë si props, shfaqini në të grupin e kaluar në formën e një liste ul.

Në Products shfaqni në konsol tekstin 'products render'. Mbysni Products në memo. Klikoni në paragraf dhe buton. Binduni se kur klikoni në paragraf, komponenti fëmijë prapëseprapë rivizatohet.

Fshehuni funksionin për shtimin e produkteve, duke e mbuluar atë me hukun useCallback. Klikoni në paragraf dhe buton. Binduni se kur klikoni në paragraf, komponenti fëmijë nuk rivizatohet më.