Reactдаги useCallback ишчиликни оптималлаштириш хуки

Ушбу дарсда биз куйидаги ишчиликни оптималлаштириш хукини useCallback кўриб чиқамиз.

useCallback хуки useMemo APIга ўхшайди, фарк шундаки, биринчиси экрангни қайта чизиш дақиқалари ўртасида қийматни кэшлайди, иккинчиси эса - коллбэкни. Бу бизга зарурат бўлмаганда қимматли функцияларни қайта ишга туширишга тўғри келмайди ва функцияни ўтказish фарзанд компонентларга ишлатилиши мумкин.

Келинг, мисолда янада батафсилрок тушунамиз. Аввало App компонентини яратамиз ва унда num стейтини ҳосил киламиз:

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

Бизда тугма бўлсин, уни босганда num 1 га orthи ва num қийматини кўрсатадиган абзац бўлсин:

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

Энди, фараз қилайлик, бизда App да яна бир рўйхат чиқарилади, уни бошқа tugma босилганда тўлдирамиз. Ушбу рўйхат элементларини сақлаш учун биз стейт items ни ҳосил киламиз:

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

Сўнгра уларни қўшиш учун addItem функциясини ёзамиз:

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

Энди рўйхат элементларини кўрсатиш учун код ёзамиз ва уни Items фарзанд компонентига чиқарамиз, у проплар шаклида элементлар массиви ва уларни қўшиш учун функция олади. Items қачон қайта чизилишини кўриш учун консолга чиқаришни унутмаймиз:

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;

Items ни App компонентининг охирига жойлаштирамиз ва унга массив items ва элементларни қўшиш учун addItem функциясини ўтказамиз:

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

Энди tugmachalarni босайлик ва num orthишини ва рўйхатга янги элементлар қўшилишини кўрамиз. Консолни ochib, биз рўйхатимиз ҳар доим қайта чизилишини кўрамиз, ҳатто биз num ni orthирувчи tugmani босганда ҳам.

Агар бизда кичкина рўйхат бўлса, ҳаммаси жойида, аммо агар у катта бўлиши кутілса ва унда яна кўп нарса бўлса? Муаммо эмас - дейсиз, чунки ўтган дарсда биз memo API ни кўрдик, аynan компонентнинг кераксиз қайта чизилишини олдини олиш учун.

Шундай қилиб, келинг Items компонентимизни memo га ўрайлик ва ҳамма ишлар. Айтарли joyi, буни тўғридан-тўғри Items ни экспорт қилганда қилиш мумкин:

export default memo(Items);

memo ни импорт қилишни унутмаймиз:

import { memo } from 'react';

Энди консолни ochамиз ва tugmachalarni босамиз. Ҳамма ҳаракатlar бефойда! Биз компонентни мемолаштирдик, лекин 'click' tugmasi босилганда компонент Items барча вақтда қайта чизилиши давом этади.

Масала шундаки, ота-она компоненти қайта чизилганда, унинг функциялари янгидан яратилади - бу бизнинг Items га ўтказган функциямиз addItem га taаллуқли.

Аynan шу пайтда бизга useCallback хуки ёрдам беради. Келинг уни қўллаймиз. Аввало уни App га импорт қиламиз:

import { useCallback } from 'react';

Сўнгра oddй addItem функциясини эълон қилишни Function Expression га ўзгартирамиз, биринчи параметр sifatida useCallback учун бизнинг функциямизни колбэк кўринишида кўрсатамиз. Иккинчи параметр sifatida қавс ичида bogʻliqliklarni кўрсатамиз - функцияда ishtirok etadigan барча реактив ўзгарувчилар, bizning ҳолатимизда бу массив items:

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

Тайёр! Шу тариқа биз функцияни кэшладик. Янгидан tugmachalarni босамиз ва кўрамизки, энди 'click' tugmasi босилганда бизнинг фарзанд компонент қайта чизилмайди.

App компонентини яратинг, уңга матн bilan абзац joylashtiring. Бошланғич қиймати 'text' бўлган стейт ҳосил қилинг ва уни абзацда кўрсатинг. Абзац босилганда уңга матннинг охирига унглатиш белгиси қўшилсин.

Products фарзанд компонентини яратинг, уnda янги продукт қўшиш учун tugma бўлсин. Уни App да жойланг. Ота-она компонентида продуктлар массиви bilan стейт ҳосил қилинг ва янги продукт қўшиш учун функция яратинг. Уларни фарзандга проплар sifatida ўтказінг, унда ўтказілган массивни ul рўйхат шаклида кўрсатинг.

Products да консолга матн 'products render' ни чиқаринг. Products ни memo га ўранг. Абзац ва tugmani босинг. Ишонч ҳосил қилингки, абзац босилганда фарзанд компонент barobar қайта чизилишини.

Продуктларни қўшиш учун функцияни useCallback хукига ўраб, кэшланг. Абзац ва tugmani босинг. Ишонч ҳосил қилингки, абзац босилганда, фарзанд компонент энди кўпроқ қайта чизилмайди.