Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Toen ik aan het eerste artikel begon had ik geen idee dat het een hele serie zou worden en al helemaal niet eentje die zo groot zou worden maar we zijn inmiddels bij deel 4 aangekomen van React Hooks. Hieronder kan je de vorige delen van de serie zien. In dit artikel gaan we het hebben over de hook useCallback en useMemo en wanneer we ze moeten gebruiken.
useCallback en useMemo zijn 2 hooks die beiden gebruik maken van memoization. Memoization is een optimalisatie techniek om programma’s sneller te laten lopen. Het kan het resultaat bewaren van functie calls en deze cachen en zodra dezelfde input weer ingevoerd wordt dan geeft hij die direct terug in plaats van de functie opnieuw uit te voeren. useCallback geeft een memoized callback terug en useMemo geeft een memoized waarde terug.

useCallback

Als we kijken naar de officiële documentatie van React dan zeggen ze useCallback returned een memoized callback. useCallback geeft een memoized versie van de callback terug die alleen maar veranderd als een van zijn afhankelijkheden verdanderd. Nou zou je kunnen zeggen dat je elke functie in een useCallback gaat zetten, maar elke optimalisatie brengt gevaren met zich mee en in veel gevallen zorgt het er ook voor dat het juist langzamer wordt in plaats van sneller.

const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], );

Daarom moet je goed nadenken waar je wel en waar je niet useCallback kan gebruiken. Een voorbeeld zou kunnen zijn als je in je App.js 3 verschillende counters bij houdt dan wil je niet dat als de state van een van de counters geupdate wordt dat alle functies rerenderen alleen degene die afhankelijk zijn van die specifieke counter. Nou is dit in de meeste gevallen geen probleem omdat de creatie van zo’n functie verwaarloosbaar is en useCallback eerder je applicatie langzamer maakt dan sneller. Maar geef je nou heel veel grote functies door die vrij groot zijn dan kan useCallback je helpen.

useMemo

Net als use callback maakt useMemo ook gebruik van memoization alleen wordt er in dit geval geen callback gemoized maar waardes. Bijvoorbeeld als je een hele zware berekening hebt dan kan je het resultaat memoizen zodat niet bij elke rerender die zware bereking moet uitvoeren. Net als bij useCallback moet je voorzichtig zijn met het implementeren van deze 2 hooks. Als je de optimalisatie niet kan meten dan is memoization eigenlijk al niet de moeite waard.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Voordat je gaat beginnen aan het optimaliseren van je React applicatie moet je goed bedenken of het nuttig is om je applicatie te optimaliseren. Anders loop je het risico dat je je applicatie langzamer maakt in plaats van snellen