Хук за оптимизација на перформансите useMemo во React

Првиот hook за оптимизација на перформансите кој ќе го разгледаме - е useMemo.

Овој hook помага да се кешираат резултатите од операции кои трошат многу ресурси помеѓу моментите на прецртување на екранот и соодветно може да помогне да се избегнат непотребни обемни пресметки. Таквото кеширање се нарекува уште мемоизација.

Да видиме како функционира ова. Ајде да создадеме компонента со копче и наслов h3:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

А сега да направиме така што при клик на насловот неговата боја да се менува од портокалова во зелена и обратно. За почеток да креираме state isGreen:

const [isGreen, setIsGreen] = useState(false);

Да додадеме во атрибутот style на насловот услов за промена на бојата на насловот и да додадеме handler за клик:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Text</h3>

Нека имаме и некоја вредност, која ќе се зголемува при клик на нашето копче за еден. Да креираме state за неа:

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

Да додадеме обработка на клик на копчето:

<button onClick={() => setNum(num + 1)}>
	clicks
</button>

Нека имаме и некоја функција square, која ќе го враќа квадратот на вредноста num. Резултатот од повикувањето на функцијата ќе го запишеме во променливата result:

const result = square(num);

function square(num) {
	return num * num;
}

Да го прикажеме result во текстот на копчето:

<button onClick={() => setNum(num + 1)}>
	clicks: {result}
</button>

Како резултат, го добивме следново: при клик на копчето се менува вредноста num, која потоа се подига на квадрат, а при клик на насловот се менува бојата на насловот.

Имаме многу мала компонента, сè работи брзо, и покрај тоа што при клик на насловот за промена на неговата боја целата компонента се прецртува повторно, соодветно се случуваат повторно и пресметките, кои се поврзани со копчето, дури и тогаш кога не сме го допреле. А сега замислете ако нашите пресметки беа обемни и сè би се пресметувало повторно секој пат.

Ајде, малку да ја отежнаме нашата функција, сега ќе "размислува" малку подолго. На овој начин ќе симулираме долги пресметки:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Само не прави ништо ...
	}
	
	return num * num;
}

Кликнете сега на насловот. Излегува, дека сега поради долгото работење на функцијата square (а копчето не сме го допреле) мора цела вечност да чекаме за да му се промени бојата на насловот!

Овде на помош ни доаѓа hook-от useMemo. За ова, потребно е првиот параметар да ја пренесеме функцијата која ја пресметува вредноста што сакаме да ја кешираме, оваа функција мора да е чиста и да не прима никакви параметри. А вториот параметар - зависностите во квадратни загради, со други зборови, сите реактивни вредности кои учествуваат во кодот на функцијата. На овој начин, во result сега ќе ја внесеме ваква конструкција:

const result = useMemo(() => square(num), [num]);

Повторно да кликаме на насловот. Сега, ако не го допираме копчето со пресметките и не го менуваме на тој начин вредноста на state-от num, тогаш ништо не се пресметува повторно, и React ја прикажува кешираната вредност во копчето, затоа нашиот наслов брзо си ја менува својата боја.

Создадете компонента App, разместете во неа параграф. Создадете state text со почетна вредност 'react', нека вредноста на state-от се прикажува како текст на параграфот. Нека при клик на параграфот, на неговиот крај од текстот се додава извичник.

Создадете уште еден state num, со почетна вредност 0. Разместете во App уште еден параграф. Направете така, што при клик на него num да се зголемува за 1.

А сега додадете во App функција triple, која како параметар прима num и ја враќа нејзината тројна вредност. Ставете го резултатот од повикувањето на функцијата во променлива result. Прикажете го result како текст на вториот параграф. Кликајте наизменично на параграфите, забележете како бавно се додаваат извичниците.

Исправете ја ситуацијата, завиткувајќи ја бавната функција triple во useMemo.