useMemo: cos'è, caching dei calcoli e React Native

Cos'è useMemo in React Native

useMemo — è un hook della libreria standard di React, disponibile in React Native senza pacchetti aggiuntivi. Memoizza il valore restituito dalla funzione passata e riutilizza questo valore nei render successivi fino a quando le dipendenze specificate nell'array cambiano.

Il nome dell'hook deriva da memoization — una tecnica di ottimizzazione in cui il risultato di una funzione costosa viene memorizzato in una cache. Nelle chiamate successive con gli stessi argomenti, viene restituito il valore memorizzato invece di ricalcolarlo.

Nel contesto di React Native, la memoizzazione è particolarmente importante a causa delle caratteristiche architetturali. Ogni re-render del componente invia dati attraverso il bridge JavaScript — Nativo, che richiede tempo. Se un componente contiene calcoli costosi (filtraggio di elenchi, ordinamento, formattazione), ogni re-render li ripeterà, bloccando il thread JS e causando cali di frame.

Secondo React Native Performance Docs, 2024, il collo di bottiglia spesso non è il rendering dei componenti nativi, ma l'esecuzione della logica JavaScript tra i render. useMemo risolve proprio questo problema.

Come funziona la memoizzazione dei valori

useMemo accetta una funzione e un array di dipendenze, restituendo un valore memoizzato. React memorizza il valore precedente e l'array di dipendenze. Ad ogni render, React confronta le dipendenze attuali con quelle precedenti usando Object.is. Se almeno una dipendenza è cambiata, la funzione viene eseguita di nuovo e il risultato viene memorizzato.

Sintassi e passaggio degli argomenti

La firma di useMemo è identica sul web e in React Native. Il primo argomento è una funzione senza parametri che restituisce il valore da memoizzare. Il secondo è un array di dipendenze, al cui cambiamento il valore verrà ricalcolato.

import React, { useMemo } from 'react';

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

In questo esempio, sortedList viene ricalcolato solo quando cambia il riferimento all'array items. Se il contenuto dell'array è cambiato ma il riferimento è rimasto lo stesso (mutazione), useMemo non rileverà le modifiche — questo è un limite importante.

Confronto delle dipendenze tramite Object.is

React utilizza l'algoritmo Object.is per confrontare le dipendenze, che funziona in modo simile all'uguaglianza stretta === ma gestisce NaN correttamente (+0 e -0 sono considerati diversi). Ciò significa che per i tipi primitivi (stringhe, numeri, booleani), il confronto funziona per valore, mentre per oggetti e array — per riferimento.

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

Comprendere questo meccanismo è fondamentale: se passi un nuovo oggetto nelle dipendenze ad ogni render, la memoizzazione sarà inutile perché le dipendenze saranno considerate cambiate ogni volta.

Quando usare useMemo

useMemo è giustificato in tre scenari: calcoli costosi, passaggio di props stabili ai componenti figli e preservazione dell'identità referenziale degli oggetti. In React Native, tutti e tre gli scenari si verificano regolarmente a causa dell'architettura delle applicazioni mobili.

Calcoli costosi

Se un componente elabora grandi array di dati (filtraggio, ordinamento, raggruppamento) o operazioni matematiche intensive, useMemo impedisce di ripetere questi calcoli ad ogni re-render. Nelle applicazioni mobili, un esempio tipico è la formattazione dei dati da un'API prima di visualizzarli in un elenco.

Props stabili per componenti figli

Quando un componente figlio è avvolto in React.memo, si ri-rende solo quando cambiano le sue props. Se un oggetto prop viene creato all'interno del genitore senza useMemo, ad ogni render del genitore verrà creata una nuova referenza, e il componente figlio si ri-renderà inutilmente, annullando il beneficio di React.memo.

Memoizzazione dei calcoli degli stili

In React Native, gli stili spesso dipendono dalle props — ad esempio, la larghezza di un elemento viene calcolata in base alla dimensione dello schermo. useMemo permette di calcolare questi stili dinamici solo quando i parametri di input cambiano.

Quando useMemo è inutile

useMemo non è uno strumento di ottimizzazione universale. In diversi scenari, non porta benefici e può persino peggiorare le prestazioni a causa dell'overhead di memorizzazione e confronto delle dipendenze. In React Native, dove ogni byte di memoria conta, applicare useMemo ciecamente senza misurarne l'effetto è un anti-pattern.

L'hook non porta benefici in tre casi principali. Primo, se il calcolo è banale (addizione semplice, concatenazione di stringhe), il costo di useMemo supera il costo del calcolo stesso. Secondo, se le dipendenze cambiano ad ogni render — la funzione verrà comunque eseguita, e la memoizzazione aggiunge solo lavoro extra. Terzo, se il componente si renderizza raramente, l'overhead di memorizzazione nella cache non è giustificato.

Secondo Kent C. Dodds, 2023, prima di aggiungere useMemo, dovresti misurare il problema usando React DevTools Profiler o il Performance Monitor integrato in React Native. Se il re-render di un componente richiede meno di 1 ms, la memoizzazione non è necessaria.

• Calcoli banali — addizione, concatenazione, semplici operazioni ternarie
• Re-render rari — schermate statiche che si renderizzano una volta
• Dipendenze mutevoli — se le dipendenze sono nuove ad ogni render, la memoizzazione è inutile
• Valori primitivi — numeri e stringhe non richiedono memoizzazione, sono già economici

useMemo vs useCallback: confronto

useMemo e useCallback — due hook di memoizzazione di React che vengono spesso confusi. La differenza sta in ciò che preservano: useMemo restituisce il risultato dell'esecuzione di una funzione (qualsiasi valore), mentre useCallback restituisce la funzione stessa. Entrambi accettano un array di dipendenze, ma la sintassi differisce.

Nella pratica, useCallback è zucchero sintattico su useMemo per i casi in cui hai bisogno di memoizzare una funzione. In React Native, entrambi gli hook vengono usati con la stessa frequenza: useMemo — per i dati (testo formattato, stili calcolati), useCallback — per i gestori di eventi (onPress, onChangeText).

Esempi pratici con useMemo

Esaminiamo due scenari reali di utilizzo di useMemo nelle applicazioni React Native. Il primo è il filtraggio di un elenco di contatti per query di ricerca, il secondo è il calcolo di stili dinamici basati sulla dimensione dello schermo.

Esempio 1: ricerca e filtraggio di un elenco

In questo esempio, useMemo impedisce il filtraggio ripetuto di una grande lista di contatti ad ogni render se né la query di ricerca né i dati di origine sono cambiati.

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

Senza useMemo, il filtraggio verrebbe eseguito ad ogni render, inclusi quelli causati da animazioni o cambiamenti di stato in altre parti del componente. Con useMemo, il filtraggio viene eseguito solo quando contacts o searchQuery cambiano.

Esempio 2: calcolo di stili dinamici

In React Native, gli stili spesso dipendono dalle dimensioni dello schermo o dalle props del componente. useMemo permette di calcolare questo oggetto di stili una volta e riutilizzarlo fino a quando le dipendenze cambiano.

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

Questo approccio garantisce che l'oggetto cardStyle rimanga stabile (stesso riferimento) fino a quando isSelected cambia. Se Card è avvolto in React.memo, questo modello previene re-render non necessari degli elementi figli.