React даги memo API си

Кейинги хуқни кўриб чиқишдан олдин, фойдали memo API сини эслатиб ўтиш керак, у бизга компонентнинг пропслари ўзгармаган тақдирда қайта рендерингдан сақланишта ёрдам беради.

Буни мисолда кўриб чиқайлик. Иккита инпути бор 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 компоненти қайта чизилмайди такрорланган ҳолда.