API memo v Reacte

Skôr ako sa pozrieme na ďalší hook, je potrebné spomenúť aj užitočné API memo, ktoré nám pomáha vyhnúť sa opakovanému renderovaniu komponentu, ak jeho props ostanú nezmenené.

Poďme si to rozobrať na príklade. Vytvorme komponent App, v ktorom budú dva vstupy, do ktorých, predpokladajme, sa zadávajú meno a priezvisko:

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

Pridajme na začiatok komponentu stavy pre ne:

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

Urobme ešte aj podriadený komponent Child.js, nech zobrazuje pozdrav, v ktorom sa bude zobrazovať zadané meno. Tiež v konzole sa bude vypisovať reťazec 'child render' pri každom renderovaní tohto komponentu:

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

Pridajme Child do rozloženia hlavného komponentu za posledný vstup a budeme mu ako prop posielať meno:

<Child name={name} />

Importujme ho do hlavného komponentu:

import Child from './Child';

A teraz otvorme konzolu a budeme do polí na vkladanie zadávať meno a priezvisko. Tu uvidíme, že aj pri zadávaní znakov do poľa pre priezvisko, sa náš podriadený komponent bude zakaždým prekresľovať. Žiadne problémy, veď máme malý komponent. Ale predstavte si, keby tento komponent zobrazoval veľké množstvo dát a pritom sa zakaždým prekresľoval.

A teraz zabalme podriadený komponent do memo a pozrime sa, ako sa zmení renderovanie. Na začiatok importujme do neho memo:

import { memo } from 'react';

Potom vytvorme novú premennú a priraďme jej náš Child, zabalený do memo. Dostaneme nasledujúce funkčné vyhlásenie:

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

Otvorme konzolu a budeme znova zadávať meno a priezvisko do polí. Teraz vidíme, že pri zadávaní priezviska, sa náš podriadený komponent neprekresľuje.

Treba pamätať, že to nebude fungovať, ak sa pri nezmenených props zmenia stavy, ktoré komponent využíva, alebo kontext, ktorý využíva zmeny.

Vezmite kód komponentu App, ktorý sme robili v tejto lekcii, nechajte v ňom iba prvý vstup. Vytvorte React komponent Text, obsahujúci odsek s textom 'long text', a umiestnite ho v App za vstup.

V komponente Text pridajte riadok console.log('text render');. Uistite sa, že pri zadávaní znakov do vstupu sa komponent Text prekresľuje zakaždým.

A teraz zabalte komponent Text do memo. Uistite sa, že pri zadávaní znakov do vstupu sa komponent Text neprekresľuje opakovane.