React-тегі useCallback өнімділік оңтайландыру хукі

Бұл сабақта біз келесі өнімділікті оңтайландыру хукін useCallback қарастырамыз.

useCallback хукі useMemo API-сына ұқсас, айырмашылығы мында: біріншісі экран қайта сызылу аралығында мәнді сақтайды, ал екіншісі - коллбэк. Бұл бізге қажет емес кезде ресурсты қажет ететін функцияларды қайта іске қоспауға мүмкіндік береді және функцияны бала компонентке жіберу кезінде қолданылуы мүмкін.

Мысал арқылы толығырақ қарастырайық. Алдымен App компонентін жасайық және оның ішінде num стейтін құрайық:

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

Бізде батырма болсын, оны басқанда num 1-ге өседі, және біз num мәнін көрсететін абзац:

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

Енді, бізде App-та тағы басқа батырманы басу арқылы толықтыратын элементтер тізімі шығарылады деп есептейік. Бұл тізім элементтерін сақтау үшін біз 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} />
	</>
);

Енді батырмаларды басайық және num-тың өсетініне және тізімге жаңа элементтер қосылатынына көз жеткізейік. Консольді ашып, біз тізіміміздің әр басқан сайын қайта сызылатынын көреміз, тіпті біз num-ты өсіретін батырманы басқанда да.

Егер бізде кішкентай тізім болса, онда бәрі жақсы, ал егер ол үлкен болады деп болжанса және онда тағы көп нәрсе болса? Қобалжымаңыз - дейсіз, өйткені өткен сабақта біз компоненттің қажетсіз қайта сызылуынан құтылу үшін memo API-сын қарастырдық.

Items компонентін memo-ға орап, істі бітірейік. Бұны тіпті Items-ты экспорттау кезінде жасауға болады:

export default memo(Items);

memo-ды импорттауды ұмытпайық:

import { memo } from 'react';

Енді консольді ашып, батырмаларды басайық. Барлық күш-жігер босқа! Біз компонентті есте сақтадық, бірақ 'click' батырмасын басқанда Items компоненті әр басқан сайын қайта сызылып тұрады.

Мәселе мынада, ата-ана компоненті қайта сызылған кезде, оның функциялары жаңадан қайта жасалады - бұл біздің Items-қа беретін addItem функциямызға да қатысты.

Дәл осы сәтте бізге useCallback хукі көмектеседі. Оны қолданайық. Алдымен оны App-қа импорттайық:

import { useCallback } from 'react';

Содан кейін addItem функциясын жай жариялаудан Function Expression-ға өзгертейік, useCallback үшін бірінші параметр ретінде функциямызды колбек түрінде көрсетейік. Екінші параметр ретінде төртбұрышты жақша ішінде тәуелділіктерді көрсетейік - функцияда қатысатын барлық реактивті айнымалылар, біздің жағдайда бұл items массиві:

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

Дайын! Осылайша біз функцияны сақтадық. Батырмаларды қайта басып, енді 'click' батырмасын басқанда бала компонентіміз қайта сызылмайтынын көреміз.

App компонентін жасаңыз, оның ішіне мәтіні бар абзац қойыңыз. Бастапқы мәні 'text' болатын стейт құрыңыз және оны абзацта шығарыңыз. Абзацты басқанда оған мәтін соңына леп белгісі қосылатын болсын.

Products бала компонентін жасаңыз, онда сізде жаңа өнімді қосу үшін батырма болады. Оны App-та орналастырыңыз. Ата-ана компонентінде өнімдер массивімен стейт құрыңыз және жаңа өнімді қосу функциясын жасаңыз. Оларды пропс ретінде балаға беріңіз, онда берілген массивті ul тізімі түрінде шығарыңыз.

Products-та консольге 'products render' мәтінін шығарыңыз. Products-ты memo-ға ораңыз. Абзац пен батырманы басыңыз. Абзацты басқанда бала компоненті әлі де қайта сызылатынына көз жеткізіңіз.

Өнімдерді қосу функциясын useCallback хукіне орап сақтаңыз. Абзац пен батырманы басыңыз. Абзацты басқанда, бала компоненті енді қайта сызылмайтынына көз жеткізіңіз.