useMemo: Was es ist, Berechnungs-Caching und React Native

Was ist useMemo in React Native

useMemo — ist ein Hook aus der Standard-React-Bibliothek, der in React Native ohne zusätzliche Pakete verfügbar ist. Er memoisiert den von der übergebenen Funktion zurückgegebenen Wert und verwendet diesen Wert bei nachfolgenden Renderings wieder, bis sich die im Array angegebenen Abhängigkeiten ändern.

Der Name des Hooks leitet sich von Memoization ab — einer Optimierungstechnik, bei der das Ergebnis einer teuren Funktion in einem Cache gespeichert wird. Bei nachfolgenden Aufrufen mit denselben Argumenten wird der zwischengespeicherte Wert zurückgegeben, anstatt neu berechnet zu werden.

Im Kontext von React Native ist Memoization aufgrund der architektonischen Besonderheiten besonders wichtig. Jedes erneute Rendern einer Komponente sendet Daten über die JavaScript-Native-Brücke, was Zeit kostet. Wenn eine Komponente teure Berechnungen enthält (Listenfilterung, Sortierung, Formatierung), wiederholt jedes Neurendern diese, blockiert den JS-Thread und verursacht Frameeinbrüche.

Laut React Native Performance Docs, 2024 liegt der Engpass meist nicht im Rendern nativer Komponenten, sondern in der Ausführung von JavaScript-Logik zwischen Renderings. useMemo löst genau dieses Problem.

Wie Wert-Memoization funktioniert

useMemo nimmt eine Funktion und ein Abhängigkeitsarray entgegen und gibt einen memoisierten Wert zurück. React speichert den vorherigen Wert und das Abhängigkeitsarray. Bei jedem Rendern vergleicht React die aktuellen Abhängigkeiten mit den vorherigen mittels Object.is. Wenn sich mindestens eine Abhängigkeit geändert hat, wird die Funktion erneut ausgeführt und das Ergebnis gespeichert.

Syntax und Argumentübergabe

Die Signatur von useMemo ist im Web und in React Native identisch. Das erste Argument ist eine parameterlose Funktion, die den zu memoierenden Wert zurückgibt. Das zweite ist ein Abhängigkeitsarray, bei dessen Änderung der Wert neu berechnet wird.

import React, { useMemo } from 'react';

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

In diesem Beispiel wird sortedList nur neu berechnet, wenn sich die Referenz zum items-Array ändert. Wenn sich der Array-Inhalt geändert hat, die Referenz aber gleich geblieben ist (Mutation), erkennt useMemo die Änderungen nicht — das ist eine wichtige Einschränkung.

Vergleich von Abhängigkeiten mittels Object.is

React verwendet den Object.is-Algorithmus zum Vergleichen von Abhängigkeiten, der ähnlich wie strikte Gleichheit === funktioniert, aber NaN korrekt behandelt (+0 und -0 gelten als unterschiedlich). Das bedeutet, dass für primitive Typen (Strings, Zahlen, Booleans) der Vergleich nach Wert erfolgt, während für Objekte und Arrays der Vergleich nach Referenz erfolgt.

// Object.is({'a': 1}, {'a': 1}) -> false (different refs)
// Object.is(42, 42) -> true (primitive by value)
// Object.is(NaN, NaN) -> true (correct handling of NaN)

Das Verständnis dieses Mechanismus ist entscheidend: Wenn Sie bei jedem Rendern ein neues Objekt in die Abhängigkeiten übergeben, ist die Memoization nutzlos, da die Abhängigkeiten jedes Mal als geändert betrachtet werden.

Wann useMemo verwenden

useMemo ist in drei Szenarien sinnvoll: teure Berechnungen, Übergabe stabiler Props an untergeordnete Komponenten und Bewahrung der referenziellen Identität von Objekten. In React Native treten alle drei Szenarien aufgrund der Architektur mobiler Anwendungen regelmäßig auf.

Teure Berechnungen

Wenn eine Komponente große Datenarrays (Filtern, Sortieren, Gruppieren) oder ressourcenintensive mathematische Operationen verarbeitet, verhindert useMemo die Wiederholung dieser Berechnungen bei jedem Neurendern. In mobilen Anwendungen ist ein typisches Beispiel das Formatieren von Daten aus einer API vor der Anzeige in einer Liste.

Stabile Props für untergeordnete Komponenten

Wenn eine untergeordnete Komponente in React.memo eingewickelt ist, wird sie nur neu gerendert, wenn sich ihre Props ändern. Wenn ein Prop-Objekt innerhalb des übergeordneten Elements ohne useMemo erstellt wird, wird bei jedem Rendern des übergeordneten Elements eine neue Referenz erstellt, und die untergeordnete Komponente wird unnötigerweise neu gerendert, wodurch der Vorteil von React.memo zunichte gemacht wird.

Memoization von Stilberechnungen

In React Native hängen Stile oft von Props ab — zum Beispiel wird die Breite eines Elements basierend auf der Bildschirmgröße berechnet. useMemo ermöglicht es, solche dynamischen Stile nur dann zu berechnen, wenn sich die Eingabeparameter ändern.

Wann useMemo nutzlos ist

useMemo ist kein universelles Optimierungswerkzeug. In mehreren Szenarien bringt es keinen Nutzen und kann die Leistung sogar verschlechtern, aufgrund des Overheads für das Speichern und Vergleichen von Abhängigkeiten. In React Native, wo jedes Byte Speicher zählt, ist die blinde Anwendung von useMemo ohne Messung seiner Wirkung ein Antipattern.

Der Hook bringt in drei Hauptfällen keinen Nutzen. Erstens, wenn die Berechnung trivial ist (einfache Addition, String-Verkettung), übersteigt der Aufwand von useMemo die Kosten der Berechnung selbst. Zweitens, wenn sich Abhängigkeiten bei jedem Rendern ändern — die Funktion wird trotzdem ausgeführt, und die Memoization fügt nur zusätzliche Arbeit hinzu. Drittens, wenn die Komponente selten gerendert wird, ist der Overhead der Cache-Speicherung nicht gerechtfertigt.

Laut Kent C. Dodds, 2023 sollten Sie vor dem Hinzufügen von useMemo das Problem mit React DevTools Profiler oder dem integrierten Performance Monitor in React Native messen. Wenn das Neurendern einer Komponente weniger als 1 ms dauert, ist Memoization nicht erforderlich.

• Triviale Berechnungen — Addition, Verkettung, einfache ternäre Operationen
• Seltene Neurenderungen — statische Bildschirme, die einmal gerendert werden
• Wechselnde Abhängigkeiten — wenn Abhängigkeiten bei jedem Rendern neu sind, ist Memoization nutzlos
• Primitive Werte — Zahlen und Strings benötigen keine Memoization, sie sind ohnehin günstig

useMemo vs useCallback: Vergleich

useMemo und useCallback — zwei Memoization-Hooks von React, die oft verwechselt werden. Der Unterschied liegt darin, was sie bewahren: useMemo gibt das Ergebnis der Ausführung einer Funktion (beliebiger Wert) zurück, während useCallback die Funktion selbst zurückgibt. Beide akzeptieren ein Abhängigkeitsarray, aber die Syntax unterscheidet sich.

In der Praxis ist useCallback syntaktischer Zucker über useMemo für Fälle, in denen Sie eine Funktion memoizieren müssen. In React Native werden beide Hooks gleich häufig verwendet: useMemo — für Daten (formatierter Text, berechnete Stile), useCallback — für Ereignisbehandler (onPress, onChangeText).

Praktische Beispiele mit useMemo

Betrachten wir zwei reale Szenarien für die Verwendung von useMemo in React Native-Anwendungen. Das erste ist das Filtern einer Kontaktliste nach Suchanfrage, das zweite die Berechnung dynamischer Stile basierend auf der Bildschirmgröße.

Beispiel 1: Suche und Filterung einer Liste

In diesem Beispiel verhindert useMemo die wiederholte Filterung einer großen Kontaktliste bei jedem Rendern, wenn sich weder die Suchanfrage noch die Quelldaten geändert haben.

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}
        />
    );
};

Ohne useMemo würde die Filterung bei jedem Rendern ausgeführt, einschließlich solcher, die durch Animationen oder Zustandsänderungen in anderen Teilen der Komponente verursacht werden. Mit useMemo läuft die Filterung nur, wenn sich contacts oder searchQuery ändert.

Beispiel 2: Berechnung dynamischer Stile

In React Native hängen Stile oft von den Bildschirmabmessungen oder den Props der Komponente ab. useMemo ermöglicht es, ein solches Stilobjekt einmal zu berechnen und wiederzuverwenden, bis sich die Abhängigkeiten ändern.

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>
    );
};

Dieser Ansatz stellt sicher, dass das cardStyle-Objekt stabil bleibt (gleiche Referenz), bis sich isSelected ändert. Wenn Card in React.memo eingewickelt ist, verhindert dieses Muster unnötige Neurenderungen von Kind-Elementen.