useMemo: co to je, ukládání výpočtů do mezipaměti a React Native

Co je useMemo v React Native

useMemo — je hook ze standardní knihovny React, dostupný v React Native bez dalších balíčků. Memoizuje hodnotu vrácenou předanou funkcí a tuto hodnotu znovu používá v následujících překresleních, dokud se nezmění závislosti uvedené v poli.

Název hooku pochází z anglického memoization — techniky optimalizace, při které se výsledek nákladné funkce ukládá do mezipaměti. Při opakovaném volání se stejnými argumenty se vrátí uložená hodnota místo přepočítávání.

V kontextu React Native je memoizace obzvláště důležitá kvůli architektuře. Každé překreslení komponenty odesílá data přes most JavaScript — Nativní, což zabírá čas. Pokud komponenta obsahuje nákladné výpočty (filtrování seznamu, řazení, formátování), každé překreslení je bude opakovat, blokovat JS vlákno a způsobovat propady snímků.

Podle React Native Performance Docs, 2024 úzkým hrdlem není nejčastěji vykreslování nativních komponent, ale provádění JavaScript logiky mezi překresleními. useMemo řeší přesně tento problém.

Jak funguje memoizace hodnot

useMemo přijímá funkci a pole závislostí, vrací memoizovanou hodnotu. React ukládá předchozí hodnotu a pole závislostí. Při každém překreslení React porovnává aktuální závislosti s předchozími pomocí Object.is. Pokud se změnila alespoň jedna závislost, funkce se znovu provede a výsledek se uloží.

Syntaxe a předávání argumentů

Signatura useMemo je zcela identická na webu a v React Native. První argument — funkce bez parametrů, vracející memoizovanou hodnotu. Druhý — pole závislostí, při jejichž změně bude hodnota přepočítána.

import React, { useMemo } from 'react';

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

V tomto příkladu se sortedList přepočítává pouze když se změní reference pole items. Pokud se pole změnilo obsahem, ale reference zůstala stejná (mutace), useMemo změny neuvidí — to je důležité omezení.

Porovnávání závislostí pomocí Object.is

React používá pro porovnávání závislostí algoritmus Object.is, který funguje podobně jako striktní rovnost ===, ale správně zpracovává NaN (+0 a -0 jsou považovány za odlišné). To znamená, že pro primitivní typy (řetězce, čísla, booleany) porovnání funguje podle hodnoty, a pro objekty a pole — podle reference.

// Object.is({'a': 1}, {'a': 1}) -> false (různé reference)
// Object.is(42, 42) -> true (primitiv podle hodnoty)
// Object.is(NaN, NaN) -> true (správné zpracování NaN)

Pochopení tohoto mechanismu je kritické: pokud předáváte do závislostí nový objekt při každém překreslení, memoizace bude zbytečná, protože závislosti budou považovány za změněné pokaždé.

Kdy použít useMemo

useMemo je opodstatněný ve třech scénářích: nákladné výpočty, předávání stabilních props potomním komponentám a zachování referenční identity objektů. V React Native se všechny tři scénáře pravidelně vyskytují kvůli specifikům architektury mobilních aplikací.

Nákladné výpočty

Pokud komponenta provádí zpracování velkých datových polí (filtrování, řazení, seskupování) nebo výpočetně náročné matematické operace, useMemo zabraňuje opakování těchto výpočtů při každém překreslení. V mobilních aplikacích je typickým příkladem formátování dat z API před zobrazením v seznamu.

Stabilní props pro potomní komponenty

Když je potomní komponenta zabalena do React.memo, překresluje se pouze při změně props. Pokud je objekt props vytvářen uvnitř rodiče bez useMemo, při každém překreslení rodiče se vytvoří nová reference a potomní komponenta se překreslí znovu, čímž se ztrácí výhoda React.memo.

Memoizace výpočtů stylů

V React Native styly často závisí na props — například šířka prvku se vypočítává na základě velikosti obrazovky. useMemo umožňuje vypočítat tyto dynamické styly pouze při změně vstupních parametrů.

Kdy je useMemo zbytečný

useMemo není univerzální optimalizační nástroj. V některých scénářích nepřináší užitek a může dokonce zhoršit výkon kvůli režii ukládání a porovnávání závislostí. V React Native, kde každý bajt paměti hraje roli, je slepé používání useMemo bez měření účinku anti-vzor.

Hook nepřináší užitek ve třech hlavních případech. Zaprvé, pokud je výpočet triviální (jednoduché sčítání, spojování řetězců), náklady useMemo převyšují hodnotu samotného výpočtu. Zadruhé, pokud se závislosti mění při každém překreslení — funkce se stejně provede a memoizace přidá pouze práci navíc. Zatřetí, pokud se komponenta překresluje zřídka, režie ukládání mezipaměti není opodstatněná.

Podle Kent C. Dodds, 2023 je před přidáním useMemo nutné změřit problém pomocí React DevTools Profiler nebo vestavěného Performance Monitor v React Native. Pokud překreslení komponenty trvá méně než 1 ms, memoizace není potřeba.

• Triviální výpočty — sčítání, spojování, jednoduché ternární operace
• Vzácná překreslení — statické obrazovky, které se překreslují jednou
• Měnící se závislosti — pokud jsou závislosti při každém překreslení nové, memoizace je zbytečná
• Primitivní hodnoty — čísla a řetězce nevyžadují memoizaci, jsou stejně levné

useMemo a useCallback: srovnání

useMemo a useCallback — dva memoizační hooky z Reactu, které se často zaměňují. Rozdíl spočívá v tom, co ukládají: useMemo vrací výsledek provedení funkce (libovolnou hodnotu), zatímco useCallback vrací samotnou funkci. Oba přijímají pole závislostí, ale syntaxe se liší.

V praxi je useCallback syntaktický cukr nad useMemo pro případ, kdy je potřeba memoizovat funkci. V React Native se oba hooky používají stejně často: useMemo — pro data (formátovaný text, vypočítané styly), useCallback — pro obsluhy událostí (onPress, onChangeText).

Praktické příklady s useMemo

Podívejme se na dva reálné scénáře použití useMemo v React Native aplikacích. První — filtrování seznamu kontaktů podle vyhledávacího dotazu, druhý — výpočet dynamických stylů na základě velikosti obrazovky.

Příklad 1: vyhledávání a filtrování seznamu

V tomto příkladu useMemo zabraňuje opakovanému filtrování velkého seznamu kontaktů při každém překreslení, pokud se nezměnil ani vyhledávací dotaz, ani zdrojová data.

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

Bez useMemo by se filtrování provádělo při každém překreslení, včetně těch způsobených animacemi nebo změnou stavu jiných částí komponenty. S useMemo se filtrování spouští pouze při změně contacts nebo searchQuery.

Příklad 2: výpočet dynamických stylů

V React Native styly často závisí na velikosti obrazovky nebo props komponenty. useMemo umožňuje vypočítat takový objekt stylů jednou a znovu jej používat, dokud se závislosti nezmění.

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

Tento přístup zaručuje, že objekt cardStyle zůstává stabilní (stejná reference), dokud se isSelected nezmění. Pokud je Card zabalen do React.memo, tento vzor zabraňuje zbytečnému překreslování potomních prvků.