API memo u React-u

Pre nego što pređemo na sledeći hook, potrebno je pomenuti i korisni API memo, koji nam pomaže da izbegnemo ponovno renderovanje komponente, ako njeni props-i ostanu nepromenjeni.

Hajde da ovo razmotrimo na primeru. Napravićemo komponentu App, u kojoj će biti dva input polja, u koja se, pretpostavimo, unose ime i prezime:

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>
);

Dodajmo na početak komponente state-ove za njih:

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

Napravimo i child komponentu Child.js, neka ispisuje pozdrav u kome će se prikazivati uneseno ime. Takođe, u konzoli će se ispisivati string 'child render' pri svakom renderovanju ove komponente:

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

Dodajmo Child u razmetu glavne komponente posle poslednjeg input-a i prosledićemo mu ime kao props:

<Child name={name} />

Importujmo ga u glavnu komponentu:

import Child from './Child';

A sada otvorimo konzolu i krenimo da unosimo ime i prezime u polja. Ovde ćemo videti da čak i pri unosu simbola u polje za prezime, naša child komponenta će se svaki put ponovo renderovati. Nema nikakvih problema, pošto je naša komponenta mala. Ali zamislite da bi ova komponenta prikazivala veliku količinu podataka i da se pritom, svaki put ponovo renderovala.

A sada hajde da obmotamo child komponentu u memo, i da vidimo kako će se renderovanje promeniti. Za početak importujmo u nju memo:

import { memo } from 'react';

Zatim napravimo novu promenljivu i dodelimo joj naš Child, obmotanog u memo. Dobićemo sledeće funkcionalno izražavanje:

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

Otvorimo konzolu i krenimo ponovo da unosimo ime i prezime u polja. Sada vidimo da pri unosu prezimena, naša child komponenta se ne ponovo renderuje.

Treba zapamtiti da ovo neće raditi, ako se pri nepromenjenim props-ima menjaju state-ovi koje komponenta koristi ili context koji koristi promene.

Uzmite kod komponente App, koji smo radili na ovoj lekciji, ostavite u njemu samo prvi input. Napravite React komponentu Text, koja sadrži paragraf sa tekstom 'long text', i smestite je u App posle input-a.

U komponenti Text dodajte liniju console.log('text render');. Uverite se da pri unosu simbola u input komponenta Text ponovo renderuje svaki put.

A sada obmotajte komponentu Text u memo. Uverite se, da pri unosu simbola u input komponenta Text ne renderuje ponovo.