API memo v Reactu

Preden preučimo naslednji kavelj, je potrebno omeniti tudi uporaben API memo, ki nam pomaga izogibati se ponovnemu upodabljanju komponente, če njeni props ostanejo nespremenjeni.

Razložimo to s primerom. Ustvarimo komponento App, v kateri bosta dva vnosna polja, v katera, predpostavimo, vnašamo ime in priimek:

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

Dodajmo na začetek komponente stanja zanje:

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

Naredimo še podrejeno komponento Child.js, naj izpiše pozdrav, v katerem bo prikazano vnašano ime. Tudi v konzolo se bo izpisal niz 'child render' ob vsakem upodabljanju te komponente:

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

Dodajmo Child v razporeditev glavne komponente za zadnjim vnosnim poljem in mu bomo kot prop posredovali ime:

<Child name={name} />

Uvozimo ga v glavno komponento:

import Child from './Child';

In sedaj odprimo konzolo in v polja za vnos vnašajmo ime in priimek. Tukaj bomo videli, da tudi ob vnašanju znakov v polje za priimek, se bo naša podrejena komponenta vsakič ponovno upodobila. Ni težav, saj je naša komponenta majhna. Toda predstavljajte si, če bi ta komponenta prikazovala veliko količino podatkov in se ob tem vsakič ponovno upodabljala.

In sedaj pa ovijmo podrejeno komponento v memo, in poglejmo, kako se bo upodabljanje spremenilo. Za začetek uvozimo vanjo memo:

import { memo } from 'react';

Nato ustvarimo novo spremenljivko in ji dodelimo naš Child, ovitega v memo. Dobili bomo naslednje funkcijsko izraz:

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

Odprimo konzolo in ponovno vnašajmo ime in priimek v polja. Zdaj vidimo, da ob vnašanju priimka, se naša podrejena komponenta ne ponovno upodablja.

Zapomniti si je treba, da to ne bo delovalo, če se ob nespremenjenih props spremenijo stanja, ki jih komponenta uporablja, ali kontekst, ki uporablja spremembe.

Vzemite kodo komponente App, ki smo jo naredili v tej lekciji, pustite v njej le prvo vnosno polje. Ustvarite React komponento Text, ki vsebuje odstavek z besedilom 'long text', in jo postavite v App za vnosnim poljem.

V komponenti Text dodajte vrstico console.log('text render');. Prepričajte se, da se ob vnašanju znakov v vnosno polje komponenta Text vsakič ponovno upodobi.

In sedaj ovijte komponento Text v memo. Prepričajte se, da se ob vnašanju znakov v vnosno polje komponenta Text ne upodablja ponovno.