useMemo: ano ito, caching ng mga kalkulasyon at React Native

Ano ang useMemo sa React Native

useMemo — ay isang hook mula sa standard library ng React, available sa React Native nang walang karagdagang packages. Ito ay nagmo-memoize ng halaga na ibinabalik ng ipinasa na function at muling ginagamit ang halagang ito sa mga susunod na render hanggang sa magbago ang mga dependencies na tinukoy sa array.

Ang pangalan ng hook ay nagmula sa Ingles na memoization — isang optimization technique kung saan ang resulta ng isang mahal na function ay iniimbak sa cache. Sa paulit-ulit na tawag na may parehong mga argumento, ang naka-imbak na halaga ay ibinabalik sa halip na muling kalkulahin.

Sa konteksto ng React Native, ang memoization ay lalong mahalaga dahil sa arkitektura. Ang bawat re-render ng component ay nagpapadala ng data sa pamamagitan ng bridge JavaScript — Native, na tumatagal ng oras. Kung ang component ay naglalaman ng mga mahal na kalkulasyon (pag-filter ng listahan, pag-uuri, pag-format), ang bawat re-render ay uulitin ang mga ito, na haharang sa JS thread at magdudulot ng pagbaba ng frame.

Ayon sa React Native Performance Docs, 2024, ang bottleneck ay kadalasan hindi ang rendering ng native components, kundi ang pag-execute ng JavaScript logic sa pagitan ng mga render. Ang useMemo ay lumulutas nang eksakto sa problemang ito.

Paano gumagana ang memoization ng mga halaga

useMemo ay tumatanggap ng function at isang array ng dependencies, na nagbabalik ng na-memoize na halaga. Iniimbak ng React ang nakaraang halaga at ang array ng dependencies. Sa bawat render, inihahambing ng React ang kasalukuyang dependencies sa mga nauna gamit ang Object.is. Kung kahit isang dependency ay nagbago, ang function ay isasagawa muli at ang resulta ay iimbak.

Syntax at pagpasa ng mga argumento

Ang signature ng useMemo ay ganap na magkapareho sa web at sa React Native. Ang unang argumento — isang function na walang parameter, na nagbabalik ng halaga na memoize. Ang pangalawa — ang array ng dependencies, kung saan kapag nagbago ang mga ito, ang halaga ay muling kalkulahin.

import React, { useMemo } from 'react';

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

Sa halimbawang ito, ang sortedList ay muling kinakalkula lamang kapag nagbago ang reference ng items array. Kung ang array ay nagbago sa nilalaman ngunit ang reference ay nanatiling pareho (mutation), hindi makikita ng useMemo ang mga pagbabago — ito ay isang mahalagang limitasyon.

Paghahambing ng dependencies sa pamamagitan ng Object.is

Ginagamit ng React ang algorithm na Object.is para sa paghahambing ng dependencies, na gumagana katulad ng strict equality ===, ngunit wastong humahawak ng NaN (+0 at -0 ay itinuturing na magkaiba). Nangangahulugan ito na para sa mga primitive na uri (strings, numero, boolean) ang paghahambing ay gumagana ayon sa halaga, at para sa mga object at array — ayon sa reference.

// Object.is({'a': 1}, {'a': 1}) -> false (magkaibang referens)
// Object.is(42, 42) -> true (primitive ayon sa halaga)
// Object.is(NaN, NaN) -> true (tamang paghawak ng NaN)

Ang pag-unawa sa mekanismong ito ay kritikal: kung magpapasa ka ng bagong object sa dependencies sa bawat render, ang memoization ay magiging walang silbi dahil ang dependencies ay ituturing na nagbago sa bawat pagkakataon.

Kailan gagamitin ang useMemo

useMemo ay makatwiran sa tatlong scenario: mahal na kalkulasyon, pagpasa ng stable na props sa child components, at pagpapanatili ng referential identity ng mga object. Sa React Native, lahat ng tatlong scenario ay regular na nangyayari dahil sa arkitektura ng mga mobile application.

Mahal na kalkulasyon

Kung ang component ay nagsasagawa ng pagproseso ng malalaking array ng data (pag-filter, pag-uuri, pag-grupo) o resource-intensive mathematical operations, pinipigilan ng useMemo ang pag-uulit ng mga kalkulasyong ito sa bawat re-render. Sa mga mobile application, ang tipikal na halimbawa ay ang pag-format ng data mula sa API bago ipakita sa listahan.

Stable na props para sa child components

Kapag ang child component ay nakabalot sa React.memo, ito ay nagre-render lamang kapag nagbago ang props. Kung ang props object ay ginawa sa loob ng parent nang walang useMemo, sa bawat render ng parent ay gagawin ang bagong reference, at ang child component ay magre-render muli, na magpapawalang-bisa sa benepisyo ng React.memo.

Memoization ng mga kalkulasyon ng estilo

Sa React Native, ang mga estilo ay madalas nakadepende sa props — halimbawa, ang lapad ng isang elemento ay kinakalkula batay sa laki ng screen. Ang useMemo ay nagpapahintulot na kalkulahin ang mga dynamic na estilo lamang kapag nagbago ang mga input parameter.

Kailan walang silbi ang useMemo

useMemo ay hindi isang universal optimization tool. Sa ilang mga scenario, hindi ito nagbibigay ng pakinabang at maaaring makasama pa sa performance dahil sa overhead ng pag-iimbak at paghahambing ng dependencies. Sa React Native, kung saan mahalaga ang bawat byte ng memorya, ang bulag na paggamit ng useMemo nang hindi sinusukat ang epekto ay isang anti-pattern.

Ang hook ay hindi nagbibigay ng benepisyo sa tatlong pangunahing kaso. Una, kung ang kalkulasyon ay trivial (simpleng pagdaragdag, concatenation ng string), ang mga gastos ng useMemo ay lumalampas sa halaga ng kalkulasyon mismo. Pangalawa, kung ang dependencies ay nagbabago sa bawat render — ang function ay isasagawa pa rin, at ang memoization ay magdadagdag lamang ng dagdag na trabaho. Pangatlo, kung ang component ay bihirang mag-render, ang overhead ng pag-iimbak ng cache ay hindi makatwiran.

Ayon sa Kent C. Dodds, 2023, bago magdagdag ng useMemo, kailangan mong sukatin ang problema gamit ang React DevTools Profiler o ang built-in na Performance Monitor sa React Native. Kung ang re-render ng component ay tumatagal ng mas mababa sa 1 ms, hindi kailangan ang memoization.

• Trivial na kalkulasyon — pagdaragdag, concatenation, simpleng ternary operations
• Bihirang re-render — static na screen na nagre-render nang isang beses
• Nagbabagong dependencies — kung ang dependencies ay bago sa bawat render, walang silbi ang memoization
• Primitive na halaga — mga numero at string ay hindi nangangailangan ng memoization, sila ay mura na

useMemo at useCallback: paghahambing

useMemo at useCallback — dalawang memoization hooks mula sa React na madalas na napagkakamalan. Ang pagkakaiba ay kung ano ang kanilang iniimbak: ang useMemo ay nagbabalik ng resulta ng pag-execute ng function (anumang halaga), habang ang useCallback ay nagbabalik ng function mismo. Parehong tumatanggap ng array ng dependencies, ngunit magkaiba ang syntax.

Sa praktika, ang useCallback ay syntactic sugar sa ibabaw ng useMemo para sa kaso kung kailangan i-memoize ang isang function. Sa React Native, ang parehong hooks ay ginagamit nang pantay: useMemo — para sa data (na-format na text, nakalkulang estilo), useCallback — para sa event handlers (onPress, onChangeText).

Mga praktikal na halimbawa sa useMemo

Tingnan natin ang dalawang real-world na scenario ng paggamit ng useMemo sa React Native applications. Una — pag-filter ng listahan ng mga contact batay sa search query, pangalawa — pagkalkula ng mga dynamic na estilo batay sa laki ng screen.

Halimbawa 1: paghahanap at pag-filter ng listahan

Sa halimbawang ito, pinipigilan ng useMemo ang muling pag-filter ng malaking listahan ng mga contact sa bawat render, kung hindi nagbago ang search query o ang source 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}
        />
    );
};

Kung walang useMemo, ang pag-filter ay isasagawa sa bawat render, kasama ang mga dulot ng animation o pagbabago ng state ng ibang bahagi ng component. Sa useMemo, ang pag-filter ay na-trigger lamang kapag nagbago ang contacts o searchQuery.

Halimbawa 2: pagkalkula ng mga dynamic na estilo

Sa React Native, ang mga estilo ay madalas nakadepende sa laki ng screen o props ng component. Ang useMemo ay nagpapahintulot na kalkulahin ang naturang estilo object nang isang beses at gamitin muli hanggang sa magbago ang dependencies.

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

Ang pamamaraang ito ay ginagarantiyahan na ang object na cardStyle ay mananatiling stable (parehong reference) hanggang sa magbago ang isSelected. Kung ang Card ay nakabalot sa React.memo, ang pattern na ito ay pumipigil sa mga hindi kinakailangang re-render ng mga child elements.