useMemo: wat is het, caching van berekeningen en React Native

Wat is useMemo in React Native

useMemo — is een hook uit de standaard React bibliotheek, beschikbaar in React Native zonder extra pakketten. Het memoïseert de waarde die door de doorgegeven functie wordt geretourneerd en hergebruikt deze waarde in volgende renders totdat de in de array opgegeven afhankelijkheden veranderen.

De naam van de hook komt van het Engelse memoization — een optimalisatietechniek waarbij het resultaat van een dure functie in de cache wordt opgeslagen. Bij herhaalde aanroep met dezelfde argumenten wordt de opgeslagen waarde geretourneerd in plaats van herberekening.

In de context van React Native is memoïsatie bijzonder belangrijk vanwege de architectuur. Elke herrender van een component stuurt gegevens door de brug JavaScript — Native, wat tijd kost. Als de component dure berekeningen bevat (filteren van lijsten, sorteren, formatteren), zal elke herrender deze herhalen, de JS-thread blokkeren en frameverlies veroorzaken.

Volgens React Native Performance Docs, 2024 is de bottleneck vaak niet het renderen van native componenten, maar de uitvoering van JavaScript-logica tussen renders. useMemo lost precies dit probleem op.

Hoe werkt memoïsatie van waarden

useMemo accepteert een functie en een array van afhankelijkheden en retourneert een gememoïseerde waarde. React slaat de vorige waarde en de array van afhankelijkheden op. Bij elke render vergelijkt React de huidige afhankelijkheden met de vorige met behulp van Object.is. Als ten minste één afhankelijkheid is veranderd, wordt de functie opnieuw uitgevoerd en het resultaat opgeslagen.

Syntax en argumenten doorgeven

De handtekening van useMemo is volledig identiek op het web en in React Native. Het eerste argument — een functie zonder parameters, die de te memoïseren waarde retourneert. Het tweede — de array van afhankelijkheden, bij verandering waarvan de waarde wordt herberekend.

import React, { useMemo } from 'react';

const sortedList = useMemo(() => {
    return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

In dit voorbeeld wordt sortedList alleen herberekend wanneer de referentie van de items-array verandert. Als de array qua inhoud is veranderd maar de referentie hetzelfde blijft (mutatie), zal useMemo de veranderingen niet zien — dit is een belangrijke beperking.

Vergelijken van afhankelijkheden via Object.is

React gebruikt voor het vergelijken van afhankelijkheden het Object.is algoritme, dat vergelijkbaar werkt met strikte gelijkheid ===, maar NaN correct behandelt (+0 en -0 worden als verschillend beschouwd). Dit betekent dat voor primitieve typen (strings, getallen, booleans) de vergelijking op waarde werkt, en voor objecten en arrays op referentie.

// Object.is({'a': 1}, {'a': 1}) -> false (verschillende referenties)
// Object.is(42, 42) -> true (primitief op waarde)
// Object.is(NaN, NaN) -> true (correcte afhandeling van NaN)

Het begrijpen van dit mechanisme is cruciaal: als je bij elke render een nieuw object doorgeeft in de afhankelijkheden, is memoïsatie nutteloos omdat de afhankelijkheden elke keer als gewijzigd worden beschouwd.

Wanneer useMemo gebruiken

useMemo is gerechtvaardigd in drie scenario's: dure berekeningen, het doorgeven van stabiele props aan kindcomponenten en het behouden van referentiële identiteit van objecten. In React Native komen alle drie scenario's regelmatig voor vanwege de architectuur van mobiele applicaties.

Dure berekeningen

Als de component grote gegevensarrays verwerkt (filteren, sorteren, groeperen) of resource-intensieve wiskundige bewerkingen uitvoert, voorkomt useMemo dat deze berekeningen bij elke herrender worden herhaald. In mobiele applicaties is een typisch voorbeeld het formatteren van API-gegevens voordat ze in een lijst worden weergegeven.

Stabiele props voor kindcomponenten

Wanneer een kindcomponent is ingepakt in React.memo, herrendert deze alleen wanneer props veranderen. Als het props-object binnen de ouder zonder useMemo wordt gemaakt, wordt bij elke render van de ouder een nieuwe referentie gecreëerd en zal de kindcomponent opnieuw renderen, waardoor het voordeel van React.memo teniet wordt gedaan.

Memoïsatie van stijlberekeningen

In React Native zijn stijlen vaak afhankelijk van props — bijvoorbeeld de breedte van een element wordt berekend op basis van de schermgrootte. useMemo maakt het mogelijk deze dynamische stijlen alleen te berekenen wanneer de invoerparameters veranderen.

Wanneer is useMemo nutteloos

useMemo is geen universeel optimalisatiemiddel. In sommige scenario's levert het geen voordeel op en kan het de prestaties zelfs verslechteren door de overhead van het opslaan en vergelijken van afhankelijkheden. In React Native, waar elke byte geheugen telt, is blind gebruik van useMemo zonder het effect te meten een anti-patroon.

De hook levert in drie hoofdsituaties geen voordeel op. Ten eerste, als de berekening triviaal is (eenvoudige optelling, stringconcatenatie), wegen de kosten van useMemo zwaarder dan de waarde van de berekening zelf. Ten tweede, als afhankelijkheden elke render veranderen — de functie wordt toch uitgevoerd en memoïsatie voegt alleen extra werk toe. Ten derde, als de component zelden rendert, is de overhead van cache-opslag niet gerechtvaardigd.

Volgens Kent C. Dodds, 2023 moet je, voordat je useMemo toevoegt, het probleem meten met React DevTools Profiler of de ingebouwde Performance Monitor in React Native. Als de herrender van de component minder dan 1 ms duurt, is memoïsatie niet nodig.

• Triviale berekeningen — optellen, concatenatie, eenvoudige ternaire operaties
• Zeldzame herrenders — statische schermen die maar één keer renderen
• Veranderende afhankelijkheden — als afhankelijkheden bij elke render nieuw zijn, is memoïsatie nutteloos
• Primitieve waarden — getallen en strings hebben geen memoïsatie nodig, ze zijn toch goedkoop

useMemo en useCallback: vergelijking

useMemo en useCallback — twee memoïsatie hooks van React die vaak worden verward. Het verschil zit in wat ze bewaren: useMemo retourneert het resultaat van de functie-uitvoering (elke waarde), terwijl useCallback de functie zelf retourneert. Beide accepteren een array van afhankelijkheden, maar de syntax verschilt.

In de praktijk is useCallback syntactische suiker over useMemo voor het geval dat een functie moet worden gememoïseerd. In React Native worden beide hooks even vaak gebruikt: useMemo — voor gegevens (geformatteerde tekst, berekende stijlen), useCallback — voor gebeurtenishandlers (onPress, onChangeText).

Praktische voorbeelden met useMemo

Laten we twee realistische scenario's bekijken voor het gebruik van useMemo in React Native applicaties. De eerste — het filteren van een contactenlijst op basis van een zoekopdracht, de tweede — het berekenen van dynamische stijlen op basis van de schermgrootte.

Voorbeeld 1: zoeken en filteren van een lijst

In dit voorbeeld voorkomt useMemo dat de grote contactenlijst bij elke render opnieuw wordt gefilterd, als noch de zoekopdracht noch de brongegevens zijn veranderd.

const ContactList = ({ contacts, searchQuery }) => {
    const filteredContacts = useMemo(() => {
        if (!searchQuery.trim()) return contacts;
        const query = searchQuery.toLowerCase();
        return contacts.filter((c) =>
            c.name.toLowerCase().includes(query) ||
            c.phone.includes(query)
        );
    }, [contacts, searchQuery]);

    return (
        <FlatList
            data={filteredContacts}
            renderItem={renderContact}
            keyExtractor={(item) => item.id}
        />
    );
};

Zonder useMemo zou het filteren bij elke render worden uitgevoerd, inclusief renders veroorzaakt door animaties of statuswijzigingen van andere delen van de component. Met useMemo wordt het filteren alleen geactiveerd wanneer contacts of searchQuery veranderen.

Voorbeeld 2: berekenen van dynamische stijlen

In React Native zijn stijlen vaak afhankelijk van de schermafmetingen of props van de component. useMemo maakt het mogelijk zo'n stijlenobject één keer te berekenen en opnieuw te gebruiken totdat de afhankelijkheden veranderen.

const Card = ({ title, isSelected }) => {
    const cardStyle = useMemo(() => ({
        backgroundColor: isSelected ? '#e3f2fd' : '#ffffff',
        borderWidth: isSelected ? 2 : 1,
        padding: 16,
    }), [isSelected]);

    return (
        <View style={cardStyle}>
            <Text>{title}</Text>
        </View>
    );
};

Deze aanpak garandeert dat het cardStyle object stabiel blijft (dezelfde referentie) totdat isSelected verandert. Als Card is ingepakt in React.memo, voorkomt dit patroon onnodige herrenders van kindelementen.