Tutorial useMemo dalam React: Tingkatkan Performa dengan Teknik Sederhana

¶Intro

useMemo adalah hook yang disediakan oleh React untuk mengoptimalkan performa aplikasi. Hook ini memungkinkan komponen untuk "mengingat" hasil perhitungan yang berat atau kompleks, sehingga perhitungan tersebut tidak perlu diulang pada setiap render.

useMemo bekerja dengan menyimpan hasil perhitungan dalam memori dan hanya melakukan perhitungan kembali jika salah satu dependensinya berubah. Dengan cara ini, useMemo membantu mengurangi beban perhitungan yang tidak perlu dan meningkatkan efisiensi rendering komponen.

¶Kapan Saat Hook ini Dipakai?

useMemo sebaiknya digunakan dalam situasi-situasi tertentu di React untuk meningkatkan performa aplikasi. Berikut adalah beberapa skenario di mana useMemo menjadi sangat berguna:

1. Perhitungan Berat: Jika komponen melakukan perhitungan yang intensif secara komputasi dan hasilnya tidak sering berubah, useMemo dapat digunakan untuk menghindari perhitungan ulang yang tidak perlu setiap kali komponen dirender.

2. Komponen Anak yang Sensitif terhadap Perubahan Objek/Array: Ketika sebuah objek atau array dikirim sebagai prop ke komponen anak, dan komponen anak tersebut melakukan rendering ulang hanya karena objek atau array tersebut dibuat ulang pada setiap render meski isinya sama, useMemo dapat digunakan untuk memastikan objek atau array tersebut tetap memiliki referensi yang sama selama isinya tidak berubah.

3. Optimasi Performa dalam Kasus Tertentu: Dalam kasus-kasus di mana perubahan prop atau state tidak mempengaruhi output dari suatu perhitungan, useMemo dapat mengurangi biaya komputasi dengan mengingat hasil perhitungan sebelumnya.

4. Mencegah Render Ulang yang Tidak Perlu: Jika perhitungan yang dilakukan dalam komponen menyebabkan komponen lain melakukan render ulang tanpa alasan yang valid, useMemo bisa digunakan untuk mencegah hal ini.

Namun, penting untuk diingat bahwa useMemo sebaiknya digunakan dengan hati-hati. Menggunakannya secara tidak tepat atau berlebihan dapat justru menambah kerumitan dan overhead pada aplikasi. Penggunaan useMemo harus didasarkan pada analisis performa yang nyata dan bukan hanya dugaan atau asumsi.

¶Syntax Penulisan

Berikut adalah contoh kode yang menggunakan useMemo:

const MyComponent = ({ input }) => {
    const memoizedResult = useMemo(() => {
        // Expensive calculation or operation
        let result = ...;
        return result;
    }, [input]);

    return (
        <div>{memoizedResult}</div>
    );
};

Dalam contoh ini, memoizedResult akan menyimpan hasil dari perhitungan yang mahal. Fungsi perhitungan dijalankan jika dan hanya jika input berubah, menghindari eksekusi berulang pada setiap render komponen.

¶Array Yang Kompleks

Dalam contoh ini, saya akan membuat komponen dengan nama AverageCalculator.jsx. Komponen ini akan menerima dua props: numbers (array angka) dan threshold (nilai ambang batas). Komponen ini akan dipanggil melalui komponen lain dan pada contoh ini, saya akan memanggilnya tepat di App.jsx.

import React, { useMemo } from 'react';

const AverageCalculator = ({ numbers, threshold }) => {
    const calculateAverage = (nums) => {
        const filteredNumbers = nums.filter(num => num > threshold);
        const total = filteredNumbers.reduce((acc, num) => acc + num, 0);
        return filteredNumbers.length > 0 ? total / filteredNumbers.length : 0;
    };

    const average = useMemo(() => calculateAverage(numbers), [numbers, threshold]);

    return (
        <div>
            <h3>Average of numbers greater than {threshold}: {average.toFixed(2)}</h3>
        </div>
    );
};

export default AverageCalculator;

import React from 'react';
import AverageCalculator from './AverageCalculator';

const App = () => {
    const numbers = [10, 20, 30, 40, 50];
    const threshold = 25;
  
    return (
        <div>
            <h1>My React App</h1>
            <AverageCalculator numbers={numbers} threshold={threshold} />
        </div>
    );
};

export default App;

• calculateAverage adalah fungsi yang menghitung rata-rata.
• useMemo digunakan untuk menyimpan hasil perhitungan rata-rata.
• Hasil rata-rata ditampilkan dalam JSX.

Dengan cara ini, AverageCalculator akan menerima array angka dan nilai ambang batas, menghitung rata-rata berdasarkan kondisi yang ditetapkan, dan menampilkan hasilnya. Ini adalah cara efektif untuk menangani operasi yang kompleks dan memastikan bahwa perhitungan hanya dilakukan ketika diperlukan, yaitu ketika numbers atau threshold berubah.

¶Contoh Ketika Tidak Butuh useMemo

Ada beberapa situasi di mana useMemo tidak perlu atau bahkan tidak disarankan untuk digunakan. Berikut ini adalah penjelasan beserta contoh kasus di mana penggunaan useMemo tidak diperlukan:

¶Perhitungan Sederhana

Jika Anda hanya melakukan perhitungan atau operasi yang sederhana dan ringan, penggunaan useMemo bisa jadi berlebihan. React sendiri sangat efisien dalam menangani perubahan dan rendering, sehingga untuk operasi ringan, overhead tambahan untuk memoization bisa jadi lebih mahal daripada manfaat yang diberikan.

const SimpleComponent = ({ number }) => {
    const doubledValue = number * 2;

    return <div>Doubled Value: {doubledValue}</div>;
};

Dalam kasus ini, menggandakan nilai adalah operasi yang sangat ringan dan tidak memerlukan useMemo.

¶Tidak Ada Re-Rendering

Jika komponen Anda tidak sering dire-render atau perubahan pada props dan state jarang terjadi, penggunaan useMemo mungkin tidak memberikan peningkatan performa yang signifikan. Memoization lebih bermanfaat dalam situasi di mana komponen sering dire-render dengan props atau state yang sama.

const StaticComponent = ({ text }) => {
    return <div>{text}</div>;
};

Dalam kasus komponen yang hanya menampilkan teks dan jarang mengalami perubahan, penggunaan useMemo tidak akan memberikan manfaat yang berarti.

¶Ketika Dependensi Selalu Berubah

Jika nilai dependensi yang Anda gunakan dalam useMemo selalu berubah setiap kali komponen dirender, maka tidak ada manfaat dalam menggunakan useMemo. Ini karena memoization akan selalu diinvalidasi dan perhitungan akan dijalankan kembali setiap kali.

const ChangingComponent = ({ objectProp }) => {
    const processedValue = useMemo(() => {
        // Operasi kompleks
    }, [objectProp]);

    return <div>{processedValue}</div>;
};

Jika objectProp selalu merupakan objek baru pada setiap render, maka useMemo di sini tidak efektif.

¶Kesimpulan

useMemo adalah alat yang kuat untuk optimasi, tapi seperti alat lainnya, harus digunakan dengan tepat. Penggunaannya harus didasarkan pada kebutuhan aktual dan analisis kinerja, bukan hanya sebagai alat default untuk setiap situasi. Penggunaan useMemo yang tidak tepat dapat menyebabkan kode yang lebih kompleks dan overhead yang tidak perlu.

Saya Irsyad. Terima kasih telah menyimak. Sampai bertemu di artikel berikutnya dengan lebih banyak wawasan dan pembahasan yang menarik!