useMemo: apa itu, caching perhitungan dan React Native

Apa itu useMemo di React Native

useMemo — adalah hook dari pustaka standar React, tersedia di React Native tanpa paket tambahan. Ia memoisasi nilai yang dikembalikan oleh fungsi yang diberikan dan menggunakan kembali nilai tersebut pada render berikutnya sampai dependensi yang ditentukan dalam array berubah.

Nama hook berasal dari bahasa Inggris memoization — teknik optimasi di mana hasil fungsi yang mahal disimpan dalam cache. Pada panggilan berulang dengan argumen yang sama, nilai yang disimpan dikembalikan daripada menghitung ulang.

Dalam konteks React Native, memoisasi sangat penting karena arsitekturnya. Setiap render ulang komponen mengirim data melalui jembatan JavaScript — Native, yang memakan waktu. Jika komponen berisi perhitungan mahal (memfilter daftar, mengurutkan, memformat), setiap render ulang akan mengulanginya, memblokir thread JS dan menyebabkan penurunan frame.

Menurut React Native Performance Docs, 2024, hambatan paling sering bukanlah rendering komponen native, melainkan eksekusi logika JavaScript di antara render. useMemo memecahkan masalah ini.

Bagaimana memoisasi nilai bekerja

useMemo menerima fungsi dan array dependensi, mengembalikan nilai yang telah dimemoisasi. React menyimpan nilai sebelumnya dan array dependensi. Pada setiap render, React membandingkan dependensi saat ini dengan yang sebelumnya menggunakan Object.is. Jika setidaknya satu dependensi berubah, fungsi dijalankan kembali dan hasilnya disimpan.

Sintaks dan pengiriman argumen

Signature useMemo sepenuhnya identik di web dan di React Native. Argumen pertama — fungsi tanpa parameter, mengembalikan nilai yang akan dimemoisasi. Kedua — array dependensi, yang perubahannya akan memicu perhitungan ulang nilai.

import React, { useMemo } from 'react';

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

Dalam contoh ini, sortedList dihitung ulang hanya ketika referensi array items berubah. Jika array berubah isinya tetapi referensinya tetap sama (mutasi), useMemo tidak akan melihat perubahan — ini adalah batasan penting.

Perbandingan dependensi melalui Object.is

React menggunakan algoritma Object.is untuk membandingkan dependensi, yang bekerja mirip dengan kesetaraan ketat ===, tetapi menangani NaN dengan benar (+0 dan -0 dianggap berbeda). Ini berarti untuk tipe primitif (string, angka, boolean) perbandingan bekerja berdasarkan nilai, dan untuk objek serta array — berdasarkan referensi.

// Object.is({'a': 1}, {'a': 1}) -> false (referensi berbeda)
// Object.is(42, 42) -> true (primitif berdasarkan nilai)
// Object.is(NaN, NaN) -> true (penanganan NaN yang benar)

Memahami mekanisme ini sangat penting: jika Anda memberikan objek baru dalam dependensi setiap render, memoisasi akan sia-sia karena dependensi akan dianggap berubah setiap kali.

Kapan menggunakan useMemo

useMemo dibenarkan dalam tiga skenario: perhitungan mahal, memberikan props yang stabil ke komponen anak, dan mempertahankan identitas referensial objek. Di React Native, ketiga skenario ini sering terjadi karena arsitektur aplikasi seluler.

Perhitungan mahal

Jika komponen melakukan pemrosesan array data besar (memfilter, mengurutkan, mengelompokkan) atau operasi matematika yang memakan sumber daya, useMemo mencegah pengulangan perhitungan ini pada setiap render ulang. Dalam aplikasi seluler, contoh tipikal adalah memformat data dari API sebelum ditampilkan dalam daftar.

Props stabil untuk komponen anak

Ketika komponen anak dibungkus dalam React.memo, ia hanya render ulang ketika props berubah. Jika objek props dibuat di dalam induk tanpa useMemo, setiap render induk akan membuat referensi baru, dan komponen anak akan render ulang, meniadakan manfaat React.memo.

Memoisasi perhitungan gaya

Di React Native, gaya sering bergantung pada props — misalnya, lebar elemen dihitung berdasarkan ukuran layar. useMemo memungkinkan menghitung gaya dinamis ini hanya ketika parameter input berubah.

Kapan useMemo tidak berguna

useMemo bukanlah alat optimasi universal. Dalam beberapa skenario, ia tidak memberikan keuntungan dan bahkan dapat memperburuk kinerja karena overhead penyimpanan dan perbandingan dependensi. Di React Native, di mana setiap byte memori penting, penggunaan useMemo secara membabi buta tanpa mengukur efeknya adalah anti-pattern.

Hook tidak memberikan manfaat dalam tiga kasus utama. Pertama, jika perhitungan trivial (penjumlahan sederhana, konkatenasi string), biaya useMemo melebihi nilai perhitungan itu sendiri. Kedua, jika dependensi berubah setiap render — fungsi akan tetap dijalankan, dan memoisasi hanya menambah pekerjaan ekstra. Ketiga, jika komponen jarang render, overhead penyimpanan cache tidak dapat dibenarkan.

Menurut Kent C. Dodds, 2023, sebelum menambahkan useMemo, Anda perlu mengukur masalah menggunakan React DevTools Profiler atau Performance Monitor bawaan di React Native. Jika render ulang komponen memakan waktu kurang dari 1 ms, memoisasi tidak diperlukan.

• Perhitungan trivial — penjumlahan, konkatenasi, operasi ternary sederhana
• Render ulang jarang — layar statis yang hanya render sekali
• Dependensi yang berubah — jika dependensi baru setiap render, memoisasi sia-sia
• Nilai primitif — angka dan string tidak perlu memoisasi, mereka sudah murah

useMemo dan useCallback: perbandingan

useMemo dan useCallback — dua hook memoisasi dari React yang sering tertukar. Perbedaannya terletak pada apa yang mereka simpan: useMemo mengembalikan hasil eksekusi fungsi (nilai apa pun), sedangkan useCallback mengembalikan fungsi itu sendiri. Keduanya menerima array dependensi, tetapi sintaksnya berbeda.

Dalam praktiknya, useCallback adalah gula sintaksis di atas useMemo untuk kasus ketika perlu mememoisasi fungsi. Di React Native, kedua hook digunakan sama sering: useMemo — untuk data (teks terformat, gaya terhitung), useCallback — untuk handler peristiwa (onPress, onChangeText).

Contoh praktis dengan useMemo

Mari kita lihat dua skenario nyata penggunaan useMemo di aplikasi React Native. Pertama — memfilter daftar kontak berdasarkan kueri pencarian, kedua — menghitung gaya dinamis berdasarkan ukuran layar.

Contoh 1: pencarian dan pemfilteran daftar

Dalam contoh ini, useMemo mencegah pemfilteran ulang daftar kontak besar pada setiap render, jika baik kueri pencarian maupun data sumber tidak berubah.

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

Tanpa useMemo, pemfilteran akan dijalankan pada setiap render, termasuk yang disebabkan oleh animasi atau perubahan status bagian lain dari komponen. Dengan useMemo, pemfilteran hanya dipicu ketika contacts atau searchQuery berubah.

Contoh 2: menghitung gaya dinamis

Di React Native, gaya sering bergantung pada ukuran layar atau props komponen. useMemo memungkinkan menghitung objek gaya seperti itu sekali dan menggunakannya kembali sampai dependensi berubah.

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

Pendekatan ini memastikan bahwa objek cardStyle tetap stabil (referensi yang sama) sampai isSelected berubah. Jika Card dibungkus dalam React.memo, pola ini mencegah render ulang yang tidak perlu pada elemen anak.