Belajar React Dasar #12: Memoization (React.memo, useMemo, useCallback)

• Apa Itu Memoization?
• React.memo
• useMemo
• useCallback
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang useRef, bagaimana cara menggunakan hook tersebut untuk mengakses DOM dan menyimpan nilai tanpa memicu re-render.

Pada artikel kali ini, kita akan membahas tentang Memoization di React, yaitu teknik untuk meningkatkan performa aplikasi dengan mencegah perhitungan ulang atau re-render yang tidak diperlukan.

Ada tiga fitur utama yang biasa digunakan untuk memoization di React: React.memo, useMemo, dan useCallback.

Apa Itu Memoization?

Memoization adalah teknik optimasi di mana hasil perhitungan atau render disimpan (cache) sehingga jika input tidak berubah, React tidak perlu menghitung ulang atau merender ulang.

Hal ini sangat berguna untuk:

• Mencegah re-render component yang tidak perlu.
• Menghemat perhitungan yang berat.
• Menjaga referensi fungsi tetap sama agar tidak memicu perubahan di child component.

React.memo

React.memo digunakan untuk memoization component. Component yang dibungkus dengan React.memo hanya akan dirender ulang jika props-nya berubah.

import React, { useState } from "react";

const Child = React.memo(({ name }) => {
  console.log("Render Child");
  return <h2>Halo, {name}</h2>;
});

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child name="Budi" />
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default App;

Penjelasan:

• Component Child dibungkus dengan React.memo.
• Saat tombol diklik, hanya App yang re-render.
• Child tidak ikut re-render karena props name tidak berubah.

useMemo

useMemo digunakan untuk memoization nilai/perhitungan. Hook ini mencegah perhitungan ulang yang berat jika dependencies tidak berubah.

import { useState, useMemo } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(false);

  const expensiveCalculation = (num) => {
    console.log("Hitung ulang...");
    for (let i = 0; i < 1000000000; i++) {} // simulasi proses berat
    return num * 2;
  };

  const result = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <h1>Hasil: {result}</h1>
      <button onClick={() => setCount(count + 1)}>Tambah Count</button>
      <button onClick={() => setOther(!other)}>Toggle Other</button>
    </div>
  );
}

export default App;

Penjelasan:

• Fungsi expensiveCalculation hanya dijalankan ulang jika count berubah.
• Jika hanya other yang berubah, hasil useMemo tetap diambil dari cache.
• Ini membuat aplikasi lebih efisien.

useCallback

useCallback digunakan untuk memoization fungsi. Hook ini mencegah referensi fungsi berubah pada setiap render.

import { useState, useCallback } from "react";

const Child = React.memo(({ onClick }) => {
  console.log("Render Child");
  return <button onClick={onClick}>Klik Anak</button>;
});

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Button diklik");
  }, []);

  return (
    <div>
      <Child onClick={handleClick} />
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default App;

Penjelasan:

• Fungsi handleClick dibungkus useCallback, sehingga referensinya tetap sama selama dependencies tidak berubah.
• Component Child dibungkus React.memo, sehingga hanya akan re-render jika props onClick berubah.
• Jika kita tidak menggunakan useCallback, maka Child akan selalu re-render karena setiap render App, fungsi handleClick dibuat ulang.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang memoization di React:

• React.memo → mencegah re-render component jika props tidak berubah.
• useMemo → mencegah perhitungan ulang yang berat dengan menyimpan hasilnya.
• useCallback → mencegah pembuatan ulang fungsi agar referensinya tetap sama.

Ketiga fitur ini sangat berguna untuk optimasi performa, terutama di aplikasi besar dengan banyak component dan perhitungan kompleks.

Di artikel berikutnya, kita akan membahas tentang Context API, cara React untuk berbagi data antar component tanpa perlu props drilling.

Terima kasih