React-də performans optimallaşdırma hooku useCallback

Bu dərsdə biz aşağıdakı performans optimallaşdırma hookunu nəzərdən keçirəcəyik useCallback.

useCallback hooku useMemo API-na bənzəyir, fərq ondadır ki, birinci ekran yenidən çizdirilmələri arasında dəyəri keş edir, ikincisi isə - callback. Bu bizə ehtiyac olmadıqda resurs sərf edən funksiyaları yenidən işə salmamağa imkan verir və funksiyanın ötürülməsində uşaq komponentlərində istifadə edilə bilər.

Gəlin nümunə üzərində daha ətraflı anlayaq. Əvvəlcə App komponentini yaradaq və onun içində num state-ni təyin edək:

const [num, setNum] = useState(0);

Gəlin kliklədikdə num-ın dəyərini 1 vahid artıran bir düymə və içində num dəyərini çıxardacağımız abzas olsun:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>click</button>
		<p>clicks: {num}</p>
	</div>
);

İndi isə, fərz edək ki, App-da başqa bir düyməni basmaqla əlavə edəcəyimiz elementlər siyahısı da çıxır. Bu siyahının elementlərini saxlamaq üçün items state-ni təyin edək:

const [items, setItems] = useState([]);

Və sonra onları əlavə etmək üçün addItem funksiyasını yazaq:

function addItem() {
	setItems([...items, 'new item']);
}

İndi gəlin siyahı elementlərini göstərmək üçün kodu yazaq və onu uşaq komponenti olan Items-ə çıxaraq, hansı ki props kimi elementlər massivini və onları əlavə etmək üçün funksiyanı qəbul edəcək. Konsola çıxış əlavə etməyi unutmayaq ki, Items-ın nə vaxt yenidən çizdirildiyini görə bilək:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items render');
	
	return (
		<div>
			<h3>Our items</h3>
			{result}
			<button onClick={addItem}>add item</button>
		</div>
	);
}

export default Items;

Gəlin Items-ı App komponentinin sonunda yerləşdirək və ona items massivini və elementləri əlavə etmək funksiyası olan addItem-ı ötürək:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>click</button>
			<p>clicks: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

İndi gəlin düymələrə bir neçə dəfə klik edək və əmin olaq ki, num artır və siyahıya yeni elementlər əlavə olunur. Konsolu açsaq, görərik ki, bizim siyahı hər dəfə yenidən çizdirilir, hətta biz num-ı artıran düyməyə klik etdikdə belə.

Əgər bizim kiçik bir siyahımız varsa, onda hər şey qaydasındadır, bəs əgər güman olunur ki, o həcmli olacaq və orada daha çox şey olacaq? Problem deyil - deyəcəksiniz, axı keçən dərsdə biz komponentin lazımsız yenidən çizdirilmələrindən qaçınmaq üçün memo API-nı nəzərdən keçirdik.

Elə isə gəlin Items komponentimizi memo-ya sarıb bitirək. Yeri gəlmişkən bunu birbaşa Items-ı eksport edərkən edə bilərik:

export default memo(Items);

memo-u import etməyi unutmayaq:

import { memo } from 'react';

İndi konsolu açaq və düymələrə bir neçə dəfə klik edək. Bütün səylər boşadır! Biz komponenti memoizasiya etdik, amma 'click' düyməsinə basdıqda Items komponenti hələ də hər dəfə yenidən çizdirilir.

Bütün məsələ ondadır ki, valideyn komponent yenidən çizdirildikdə, onun funksiyaları yeni yaradılır - bu, bizim Items-a ötürdüyümüz addItem funksiyamıza da aiddir.

Məhz bu anda bizə useCallback hooku kömək edəcək. Gəlin onu tətbiq edək. Əvvəlcə onu App-ə import edək:

import { useCallback } from 'react';

Sonra sadə addItem funksiya deklarasiyasını Function Expression-a çevirək, useCallback üçün birinci parametr kimi funksiyamızı callback şəklində göstərək. İkinci parametrdə kvadrat mötərizələr içində asılılıqları - funksiyada iştirak edən reaktiv dəyişənləri göstərək, bizim halda bu items massividir:

const addItem = useCallback(() => {
	setItems(() => [...items, 'New item']);
}, [items]);

Hazır! Beləliklə, biz funksiyanı keş etdik. Yenidən düymələrə basaq və görək ki, indi 'click' düyməsinə basdıqda bizim uşaq komponenti artıq yenidən çizdirilmir.

App komponenti yaradın, onun içinə mətn olan abzas qoyun. Başlanğıc dəyəri 'text' olan state yaradın və onu abzasda çıxarın. Abzasa kliklədikdə onun mətninə sonda nida işarəsi əlavə olunsun.

Uşaq komponenti olan Products yaradın, onun içinə yeni məhsul əlavə etmək üçün düymə olacaq. Onu App-da yerləşdirin. Valideyn komponentdə məhsullar massivi üçün state yaradın və yeni məhsul əlavə etmək funksiyası yaradın. Onları props kimi uşaq komponentinə ötürün, onda ötürülən massivi ul siyahısı şəklində çıxarın.

Products-da konsola 'products render' mətnini çıxarın. Products-ı memo-ya sarıyin. Abzas və düyməyə bir neçə dəfə klik edin. Əmin olun ki, abzasa kliklədikdə uşaq komponenti yenə də yenidən çizdirilir.

Məhsul əlavə etmək funksiyasını onu useCallback hookuna sarımaqla keş edin. Abzas və düyməyə bir neçə dəfə klik edin. Əmin olun ki, abzasa kliklədikdə, uşaq komponenti artıq yenidən çizdirilmir.