API memo në React

Para se të shqyrtojmë hook-un tjetër, është e nevojshme të përmendim edhe API të dobishme memo, i cili na ndihmon të shmangim ri-renderimin e përsëritur të komponentit, nëse proptë e tij mbeten të pandryshuara.

Le ta shpjegojmë këtë me një shembull. Le të krijojmë komponentin App, në të cilin do të ketë dy inpute, në të cilat, supozojmë, futet emri dhe mbiemri:

return (
	<div>
		<label>
			name:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			surname:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Le të shtojmë në fillim të komponentit state-et për to:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Le të bëjmë edhe një komponent fëmijë Child.js, le të shfaqë një përshëndetje, në të cilën do të shfaqet emri i futur. Gjithashtu në konsol do të shfaqet vargu 'child render' në çdo renderim të këtij komponenti:

function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
}

Le të shtojmë Child në strukturën e kryesore të komponentit pas inputit të fundit dhe si prop do t'i japim atij emrin:

<Child name={name} />

Le ta importojmë atë në komponentin kryesor:

import Child from './Child';

Dhe tani le të hapim konsolën dhe të fillojmë të fusim emrin dhe mbiemrin në fushat e inputit. Këtu do të shohim se edhe kur futim karaktere në fushën për mbiemrin, komponenti ynë fëmijë do të rivizatohet çdo herë. Nuk ka probleme, në fund të fundit komponenti ynë është i vogël. Por imagjinone nëse ky komponent shfaqte një sasi të madhe të dhënash dhe në të njëjtën kohë, rivizatohej çdo herë.

Dhe tani le ta mbështjellim komponentin fëmijë në memo, dhe të shohim, si do të ndryshojë renderimi. Së pari le ta importojmë në të memo:

import { memo } from 'react';

Pastaj le të krijojmë një variabël të re dhe t'i caktojmë Child tonë, të mbështjellë në memo. Do të kemi si rezultat shprehje funksionale:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
});

Le të hapim konsolën dhe të fillojmë përsëri të fusim emrin dhe mbiemrin në fusha. Tani shohim se kur fusim mbiemrin, komponenti ynë fëmijë nuk rivizatohet.

Duhet mbajtur mend, se kjo nuk do të funksionojë, nëse me proptë të pandryshuara do të ndryshonin state-et e përfshira nga komponenti ose konteksti që përdor ndryshime.

Merrni kodin e komponentit App, që bëmë në këtë mësim, lini në të vetëm inputin e parë. Krijoni një komponent React Text, që përmban një paragraf me tekstin 'long text', dhe vendoseni atë në App pas inputit.

Në komponentin Text shtoni rreshtin console.log('text render');. U bindeni që kur futni karaktere në input komponenti Text rivizatohet çdo herë.

Dhe tani mbështilleni komponentin Text në memo. U bindeni, se kur futni karaktere në input komponenti Text nuk rivizatohet përsëri.