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>Здраво {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>Здраво {name}!</h3>;
});

Да ја отвориме конзолата и повторно да внесуваме име и презиме во полињата. Сега гледаме дека при внесување на презиме, нашата детска компонента не се прецртува.

Треба да запомниме дека ова нема да работи, ако при непроменети пропси се менуваат стејтовите, вклучени во компонентата или контекстот кој користи промени.

Земете го кодот на компонентата App, кој го направивме на оваа лекција, оставете во неа само првиот инпут. Создадете React компонента Text, која содржи параграф со текстот 'long text', и поставете ја во App после инпутот.

Во компонентата Text додадете линија console.log('text render');. Проверете дали при внесување знаци во инпутот компонентата Text се прецртува секој пат.

А сега обвијте ја компонентата Text во memo. Проверете, дали при внесување знаци во инпутот компонентата Text не се прецртува повторно.