React-də API memo

Növbəti hook-u nəzərdən keçirməzdən əvvəl, bizə komponentin propları dəyişməz qaldıqda təkrar render etməməyimizə kömək edən faydalı memo API-sını da qeyd etmək lazımdır.

Gəlin bunu bir nümunə ilə izah edək. Gəlin iki inputun olduğu App komponenti yaradaq, fərz edək ki, onlara ad və soyad daxil edilir:

return (
	<div>
		<label>
			ad:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			soyad:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Komponentin əvvəlində onlar üçün state-lər əlavə edək:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Gəlin Child.js adlı bir uşaq komponenti də edək, qoy o, daxil edilən adın göstərildiyi bir salamlamanı çap etsin. Həmçinin, hər dəfə bu komponent render olanda konsola 'child render' sətri çap olunsun:

function Child({ name }) {
	console.log('child render');
	return <h3>Salam {name}!</h3>;
}

Gəlin Child-ı əsas komponentin son inputdan sonra verstkasına əlavə edək və ona prop kimi adı ötürək:

<Child name={name} />

Gəlin onu əsas komponentə import edək:

import Child from './Child';

İndi isə konsolu açaq və input sahələrinə ad və soyadı daxil edək. Burada görəcəyik ki, soyad sahəsinə simvollar daxil edərkən belə, bizim uşaq komponentimiz hər dəfə yenidən çəkilib. Heç bir problem yoxdur, axı bizim kiçik bir komponentimiz var. Amma təsəvvür edin ki, bu komponent böyük miqdarda məlumat göstərirdi və eyni zamanda hər dəfə yenidən çəkilirdi.

İndi isə gəlin uşaq komponentini memo ilə əhatə edək və render etmənin necə dəyişdiyinə baxaq. Əvvəlcə ona memo import edək:

import { memo } from 'react';

Sonra yeni bir dəyişən yaradaq və ona memo ilə əhatə olunmuş bizim Child-ı təyin edək. Bizdə aşağıdakı funksional ifadə alınacaq:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Salam {name}!</h3>;
});

Konsolu açaq və yenidən ad və soyadı sahələrə daxil edək. İndi görürük ki, soyadı daxil edərkən bizim uşaq komponentimiz yenidən çəkilmir.

Yadda saxlamalıyıq ki, bu, dəyişməz proplar olanda komponent tərəfindən istifadə edilən state-lər və ya dəyişikliklər istifadə edən kontekst dəyişərsə işləməyəcək.

Bu dərsdə etdiyimiz App komponentinin kodunu götürün, onda yalnız birinci inputu saxlayın. 'long text' mətnini olan abzası ehtiva edən React komponenti Text yaradın və onu App-da inputdan sonra yerləşdirin.

Text komponentində console.log('text render'); sətrini əlavə edin. Əmin olun ki, inputa simvollar daxil edərkən Text komponenti hər dəfə yenidən çəkilir.

İndi isə Text komponentini memo ilə əhatə edin. Əmin olun ki, inputa simvollar daxil edərkən Text komponenti təkrar yenidən çəkilmir.