API memo în React

Înainte de a trece la următorul hook, este necesar să menționăm și despre API-ul util memo, care ne ajută să evităm re-randarea unei componente, dacă props-urile sale rămân neschimbate.

Să analizăm acest lucru cu un exemplu. Să creăm componenta App, care va avea două câmpuri de input, în care, să presupunem, se introduc prenumele și numele:

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

Să adăugăm la începutul componentei stările pentru ele:

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

Să facem și o componentă copil Child.js, să afișeze un mesaj de salut, în care va fi afișat prenumele introdus. De asemenea, în consolă va fi afișat șirul 'child render' la fiecare randare a acestei componente:

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

Să adăugăm Child în marcajul componentei principale după ultimul input și îi vom transmite ca props prenumele:

<Child name={name} />

Să o importăm în componenta principală:

import Child from './Child';

Și acum să deschidem consola și să introducem în câmpuri prenumele și numele. Aici vom vedea că chiar și la introducerea caracterelor în câmpul pentru nume, componenta noastră copil va fi re-randată de fiecare dată. Nici o problemă, având în vedere că avem o componentă mică. Dar imaginați-vă dacă această componentă ar afișa o cantitate mare de date și, în același timp, ar fi re-randată de fiecare dată.

Iar acum să împachetăm componenta copil în memo și să vedem cum se schimbă randarea. Pentru început să importăm în ea memo:

import { memo } from 'react';

Apoi să creăm o nouă variabilă și să îi atribuim Child-ul nostru, împachetat în memo. Vom obține următoarea expresie funcțională:

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

Să deschidem consola și să introducem din nou prenumele și numele în câmpuri. Acum vom vedea că la introducerea numelui, componenta noastră copil nu se re-randează.

Trebuie să reținem că acest lucru nu va funcționa, dacă la props-uri neschimbate se vor schimba stările folosite de componentă sau contextul care utilizează modificări.

Luați codul componentei App, pe care l-am făcut în această lecție, lăsați în el doar primul input. Creați o componentă React Text, care conține un paragraf cu textul 'long text' și plasați-o în App după input.

În componenta Text adăugați linia console.log('text render');. Asigurați-vă că la introducerea caracterelor în input componenta Text se re-randează de fiecare dată.

Iar acum împachetați componenta Text în memo. Asigurați-vă că la introducerea caracterelor în input componenta Text nu se re-randează repetat.