React adalah salah satu library JavaScript yang populer untuk membangun antarmuka pengguna. Dalam React, rendering ulang yang tidak perlu dapat menyebabkan penurunan performa. Untuk mengatasi ini, React menyediakan useMemo dan useCallback yang membantu mengoptimalkan rendering komponen. Artikel ini akan membahas perbedaan antara keduanya serta bagaimana cara menggunakannya dengan efektif.

1. Apa Itu useMemo?

Pengertian useMemo

useMemo adalah hook yang digunakan untuk memcached hasil perhitungan yang mahal agar tidak dihitung ulang setiap kali komponen di-render. Hook ini sangat berguna saat menangani data yang kompleks atau operasi yang berat.

Cara Menggunakan useMemo

Sintaks dasar dari useMemo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• Fungsi pertama: Berisi operasi atau perhitungan yang ingin dioptimasi.
• Array dependensi: Ketika nilai dalam array ini berubah, useMemo akan melakukan perhitungan ulang.

Contoh Penggunaan useMemo

Misalkan kita memiliki daftar angka dan ingin menghitung jumlah angka genap:

import React, { useState, useMemo } from 'react';

const NumberList = ({ numbers }) => {
  const evenNumbers = useMemo(() => {
    console.log("Menghitung angka genap...");
    return numbers.filter(num => num % 2 === 0);
  }, [numbers]);

  return (
    <div>
      <h3>Angka Genap</h3>
      <ul>
        {evenNumbers.map((num, index) => (
          <li key={index}>{num}</li>
        ))}
      </ul>
    </div>
  );
};

export default NumberList;

Dengan useMemo, filter hanya dihitung ulang saat daftar angka berubah, bukan setiap kali komponen dirender ulang.

Baca juga: Optimasi Query MongoDB dengan Aggregation Pipeline dan Indexing

2. Apa Itu useCallback?

Pengertian useCallback

useCallback adalah hook yang digunakan untuk memcached fungsi agar tidak dibuat ulang pada setiap rendering. Ini berguna saat fungsi digunakan dalam props ke komponen anak yang dioptimalkan dengan React.memo.

Cara Menggunakan useCallback

Sintaks dasar dari useCallback:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Contoh Penggunaan useCallback

Misalkan kita memiliki tombol yang mengubah state, dan kita ingin memastikan fungsi event handler tidak dibuat ulang setiap kali rendering:

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ handleClick }) => {
  console.log("Button component dirender");
  return <button onClick={handleClick}>Klik Saya</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
      <Button handleClick={increment} />
    </div>
  );
};

export default ParentComponent;

Tanpa useCallback, fungsi increment akan dibuat ulang setiap kali ParentComponent dirender ulang, yang dapat menyebabkan rendering ulang Button meskipun props-nya tidak berubah.

3. Perbedaan useMemo dan useCallback

Kesimpulan

Dalam React, useMemo dan useCallback adalah dua hook yang berguna untuk mengoptimalkan performa aplikasi dengan menghindari rendering yang tidak perlu.

• Gunakan useMemo untuk menyimpan hasil perhitungan yang mahal.
• Gunakan useCallback untuk mencegah pembuatan ulang fungsi yang tidak perlu.

Dengan memahami perbedaan dan cara penggunaannya, kita dapat meningkatkan efisiensi dan performa aplikasi React kita dengan lebih baik.