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 не перамалёўваецца паўторна.