Deel 4 van de React Hooks serie useMemo & useCallback

kennisbank, React

Gepubliceerd: 26.03.2021

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

Lees hier onze blogs!

Breid je kennis uit met de 4BIS Blog...

Domeinnaam Verkoop Software: Zo Komt Dit van Pas

Digitale Marketing, kennisbank

Domeinnaam verkoop software is onmisbaar als je domeinen wilt verkopen. Het verkopen van domeinen is steeds populairder geworden, waarbij particuliere domeinen opgekocht worden en voor hoge winst verkocht worden. De makkelijkste manier om dit te doen,...

Lees meer

Wat is een widget?

Software-modernisering, kennisbank, React, Bedrijfssoftware

Veel mensen komen widgets tegen, maar deze zijn niet altijd duidelijk. Zoveel mensen vragen zich af: wat is een widget? Wat een widget precies is leggen wij in deze blog uit.

Lees meer

WP admin error 500 in Wordpress: 5 oplossingen

WordPress, kennisbank

De WP admin error 500 in Wordpress komt bijzonder vaak voor. De Internal Server Error met statuscode HTTP error 500 is minder makkelijk op te lossen dan andere errors, waarbij de oplossing vaak voor de hand ligt. De HTTP error 500 kan veroorzaakt worden...

Lees meer

En wat kunnen we voor jou betekenen?_

Wil je meer weten of heb je interesse? Neem dan gerust direct contact met ons op, per telefoon of via de mail.
Of maak gebruik van één van onze contactformulieren zodat we je zo snel en gepast mogelijk antwoord kunnen geven. We horen graag van je!

back to top