API memo React'e

Prieš nagrinėdami kitą hook'ą, reikia paminėti ir naudingą API memo, kuris mums padeda išvengti pakartotinio komponento renderinimo, jei jo propsai lieka nepakitę.

Pažiūrėkime tai pavyzdžiu. Sukurkime komponentą App, kuriame bus du input'ai, į kuriuos, tarkime, įvedami vardas ir pavardė:

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

Pridėkime į komponento pradžią state'us jiems:

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

Padarykime ir vaikinį komponentą Child.js, tegu jis išveda pasveikinimą, kuriame bus rodomas įvedamas vardas. Taip pat konsolėje bus išvedama eilutė 'child render' kiekvieną kartą renderinant šį komponentą:

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

Pridėkime Child į pagrindinio komponento vertę po paskutinio input'o ir kaip propsą perduokime jam vardą:

<Child name={name} />

Importuokime jį į pagrindinį komponentą:

import Child from './Child';

Dabar atsidarykime konsolę ir input'uose Įveskime vardą ir pavardę. Čia pamatysime, kad net įvedant simbolius į laukelį pavardei, mūsų vaikinis komponentas vis dar bus perkartojamas. Jokių problemų, juk turime nedidelį komponentą. Bet įsivaizduokite, jei šis komponentas rodytų didelį kiekį duomenų ir tuo pačiu, kaskart būtų perrenderinamas.

O dabar apgaubkime vaikinį komponentą memo, ir pažiūrėkime, kaip pasikeis renderinimas. Pirmiausia importuokime į jį memo:

import { memo } from 'react';

Tada sukurkime naują kintamąjį ir priskirkime jam mūsų Child, apgaubtą memo. Gausime taip: funkcinę išraišką:

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

Atidarykime konsolę ir vėl įveskime vardą ir pavardę į laukelius. Dabar matome, kad įvedant pavardę, mūsų vaikinis komponentas nebesiperrenderina.

Reikia atsiminti, kad tai neveiks, jei esant nepakitusiems propsams pasikeis state'ai, kuriuos komponentas naudoja, arba kontekstas, naudojantis pakeitimus.

Paimkite komponento App kodą, kurį kūrėme šioje pamokoje, palikite jame tik pirmą input'ą. Sukurkite React komponentą Text, turintį pastraipą su tekstu 'long text', ir įdėkite jį į App po input'u.

Komponente Text pridėkite eilutę console.log('text render');. Įsitikinkite, kad įvedant simbolius į input'ą komponentas Text perrenderinamas kiekvieną kartą.

O dabar apgaubkite komponentą Text memo. Įsitikinkite, kad įvedant simbolius į input'ą komponentas Text nebesiperrenderina.