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

Први хук за оптимизацију перформанси који ћемо размотрити јесте useMemo.

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

Погледајмо како то функционише. Хајде да креирамо компоненту са дугметом и насловом h3:

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

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

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

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

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

Нека нам такође буде нека вредност, која ће се повећавати при клику по нашем дугмету за један. Дефинишимо за њу стање:

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 (а дугме ми не дирамо) морамо читаву вечност да чекамо да би наслов променио боју!

Овде ће нам у помоћ доћи хук useMemo. За то, потребно је првим параметром проследити функцију која израчунава вредност коју желимо да кеширамо, ова функција мора бити чиста и не примати никакве параметре. А другим параметром - зависности у угластим заградама, другим речима, све реактивне вредности које учествују у коду функције. Тако, у result сада ћемо уписивати овакву конструкцију:

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

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

Креирајте компоненту App, поставите у њој пасус. Дефинишите стање text са почетном вредношћу 'react', нека вредност стања се приказује као текст пасуса. Нека при клику на пасус, њему на крај текста додаје узвичник.

Дефинишите још једно стање num, са почетном вредношћу 0. Поставите у App још један пасус. Направите тако, да при клику по њему num се повећа за 1.

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

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