My React Native Notes #1: Optimasi Aplikasi dengan useMemo

Ketika berhadapan dengan permasalahan kinerja aplikasi yang lambat, memoization bisa menjadi solusinya. Dan inilah catatan saya dalam mengimplementasikan useMemo.

Apa itu useMemo?

Singkatnya, useMemo ialah fungsi pada React untuk mengingat hasil dari suatu proses. Lebih jelasnya, bisa baca dokumentasi ini.

useMemo – React

react.dev

Kapan useMemo digunakan?

Ketika kita menjalankan suatu proses pada fungsi dengan input yang sama berulang-ulang.

const tambah = (a, b) => a + b;

Pemanggilan tambah(1, 2) secara berulang kali dengan parameter yang sama akan menghasilkan nilai yang konsisten. Untuk pemanggilan kedua dan selanjutnya, useMemo akan mengabaikan proses kalkulasi 1 + 2 dan langsung memberikan angka 3.

Terutama untuk proses yang rumit, ini akan meringankan beban komputasi dalam mendapatkan suatu nilai.

Mari kita lihat contoh kasus pada React Native ini:

const [keyword, setKeyword] = useState('');

const getAnimalsData = () => {
  let result = animals;

  if (keyword) {
    result = animals.filter(animal =>
      animal.toLowerCase().includes(keyword.toLowerCase()),
    );
  }

  console.log('successfully get animals data!');
  return result;
};
const animalsData = getAnimalsData();

Variabel animalsData akan menampung hasil dari pengolahan data pada fungsi getAnimalsData yang bertujuan untuk memfilter ketika nilai dari state keyword berubah.

Kode di atas akan baik-baik saja jika hanya terdapat satu state. Sekarang kita coba tambahkan state showAnimals.

const [showAnimals, setShowAnimals] = useState(true);
const [keyword, setKeyword] = useState('');

const getAnimalsData = () => {
  let result = animals;

  if (keyword) {
    result = animals.filter(animal =>
      animal.toLowerCase().includes(keyword.toLowerCase()),
    );
  }

  console.log('successfully get animals data!');
  return result;
};
const animalsData = getAnimalsData();

const toggleShowAnimals = () => setShowAnimals(!showAnimals);

State showAnimals akan dijadikan flag pada tampilan kita nanti.

Permasalahan pun terjadi di sini. Jika nilai dari state showAnimals berubah maka variabel animalsData akan menjalankan ulang fungsi getAnimalsData yang seharusnya tidak diperlukan. Karena, fungsi getAnimalsData tidak memakai nilai dari state showAnimals.

Berikut ini bagaimana saya menggunakan useMemo untuk mengatasinya. Bungkus pemanggilan fungsi getAnimalsData dari variabel animalsData seperti ini:

const animalsData = useMemo(getAnimalsData, [keyword]);

useMemo(function, dependencies). Parameter pertama isi dengan fungsi yang akan di-memoize nilainya dan parameter kedua isi dengan state yang dipakai pada fungsi tersebut.
Contohnya seperti ini useMemo(() => {}, [state]).

Sekarang, getAnimalsData tidak akan berjalan kembali ketika nilai dari state showAnimals berubah. Sehingga ini dapat meringankan beban kerja aplikasi.

Konklusi

Pemakaian useMemo dapat menjadi salah satu solusi untuk meringankan beban kerja aplikasi. Karena, tidak ada pemrosesan ulang pada fungsi dengan input yang sama.

Full Code

import React, {useMemo, useState} from 'react';
import {StyleSheet, Switch, Text, TextInput, View} from 'react-native';

const animals = ['Monkey', 'Horse', 'Cow', 'Goat'];

const App = () => {
  const [showAnimals, setShowAnimals] = useState(true);
  const [keyword, setKeyword] = useState('');

  const getAnimalsData = () => {
    let result = animals;

    if (keyword) {
      result = animals.filter(animal =>
        animal.toLowerCase().includes(keyword.toLowerCase()),
      );
    }

    console.log('successfully get animals data!');
    return result;
  };
  const animalsData = useMemo(getAnimalsData, [keyword]);

  const toggleShowAnimals = () => setShowAnimals(!showAnimals);

  return (
    <View style={styles.container}>
      <Switch value={showAnimals} onValueChange={toggleShowAnimals} />
      {showAnimals && (
        <>
          <TextInput
            value={keyword}
            style={styles.textInput}
            placeholder={'Search animals..'}
            onChangeText={setKeyword}
          />
          <Text>{animalsData.join(', ')}</Text>
        </>
      )}
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInput: {
    width: 200,
    borderWidth: 1,
    borderColor: 'black',
    padding: 8,
    marginVertical: 8,
  },
});

Referensi

• https://react.dev/reference/react/useMemo
• https://www.joshwcomeau.com/react/why-react-re-renders/
• https://www.syncfusion.com/blogs/post/what-is-memoization-in-react.aspx
• https://medium.com/codeacademia/react-hooks-tutorial-usestate-useeffect-useref-usememo-dan-usecallback-8c8669948f8a

Image by vwalakte on Freepik