API memo у React-у

Пре него што пређемо на следећи кукац, потребно је споменути и корисни API memo, који нам помаже да избегнемо поновно рендерирање компоненте, ако су њени пропси остали непромењени.

Хајде да то размотримо на примеру. Направимо компоненту App, у којој ће бити два уносна поља, у која, претпоставимо, уносимо име и презиме:

return (
	<div>
		<label>
			име:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			презиме:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Додајмо на почетку компоненте стање за њих:

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

Направимо још и дете компоненту Child.js, нека исписује поздрав, у коме ће се приказивати уносимо име. Такође, у конзоли ће се исписивати стринг 'child render' при сваком рендерирању ове компоненте:

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

Додајмо Child у верстку основне компоненте после последњег уносног поља и као пропс ћемо му проследити име:

<Child name={name} />

Импортујмо га у основну компоненту:

import Child from './Child';

А сада отворимо конзолу и почнимо да у уносна поља уносимо име и презиме. Овде ћемо видети да чак и при уносу симбола у поље за презиме, наша дете компонента ће сваки пут да се поновно исцртава. Нема проблема, имајући у виду да је наша компонента мала. Али замислите да је компонента приказивала велику количину података и притом, сваки пут поновно исцртавана.

А сада хајде да обмотамо дете компоненту у memo, и да погледамо како ће се рендерирање променити. За почетак импортујмо у њу memo:

import { memo } from 'react';

Затим направимо нову променљиву и доделимо јој наш Child, обмотан у memo. Добићемо следећи функциони израз:

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

Отворимо конзолу и почнимо поново да уносимо име и презиме у поља. Сада видимо да при уносу презимена, наша дете компонента не поништава се.

Треба имати у виду да ово неће функционисати, ако се при непромењеним пропсима мењају стања, која се користе у компоненти или контекст, који користи промене.

Узмите код компоненте App, коју смо правили на овој лекцији, оставите у њој само прво уноснo пољe. Направите React компоненту Text, која садржи пасус са текстом 'long text', и поставите је у App после уносног поља.

У компоненти Text додајте линију console.log('text render');. Уверите се да при уносу симбола у уноснo пољe компонента Text поништава се сваки пут.

А сада обмотајте компоненту Text у memo. Уверите се, да при уносу симбола у уноснo пољe компонента Text не поништава се поново.