API memo в React

Преди да разгледаме следващата кука, трябва да споменем и за полезното API memo, което ни помага да избегнем повторно рендериране на компонент, ако неговите пропси останат непроменени.

Нека разгледаме това с пример. Ще създадем компонент App, в който ще има два инпут полета, в които, да предположим, се въвеждат име и фамилия:

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

Добавяме в началото на компонента стейтове за тях:

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, който направихме в този урок, оставете в него само първия инпут. Създайте React компонент Text, съдържащ абзац с текст 'long text' и го разположете в App след инпута.

В компонента Text добавете ред console.log('text render');. Уверете се, че при въвеждане на символи в инпута компонентът Text се прерисува всеки път.

А сега обвийте компонента Text в memo. Уверете се, че при въвеждане на символи в инпута компонентът Text не се прерисува повторно.