React-тегі memo API

Келесі хукті қарастырмас бұрын, бізге пайдалы 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 компоненті қайталанбай қайта сызылмайтынына көз жеткізіңіз.