useMemo & useCallback: Biar Nggak Boros Render - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenapa Harus Pakai useMemo & useCallback?

React punya mekanisme re-render yang bikin UI selalu up-to-date. Tapi, kalau nggak dikontrol, bisa boros dan bikin aplikasi lambat. Di sinilah useMemo dan useCallback masuk untuk menghemat sumber daya dengan mencegah perhitungan ulang yang nggak perlu.

2. useMemo: Simpan Hasil Perhitungan

Bayangkan kamu punya perhitungan berat di komponenmu, misalnya menghitung angka Fibonacci. Tanpa useMemo, setiap re-render bakal hitung ulang, padahal hasilnya sama!

Contoh Tanpa useMemo

import { useState } from "react";

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

  function expensiveCalculation(num) {
    console.log("Menghitung...");
    return num * 2;
  }

  const result = expensiveCalculation(count);

  return (
    <div>
      <h1>Hasil: {result}</h1>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default App;

Setiap kali tombol ditekan, expensiveCalculation dipanggil ulang, padahal hasilnya bisa diingat!

Pakai useMemo

import { useState, useMemo } from "react";

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

  const result = useMemo(() => {
    console.log("Menghitung...");
    return count * 2;
  }, [count]);

  return (
    <div>
      <h1>Hasil: {result}</h1>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default App;

Dengan useMemo, React hanya menghitung ulang jika count berubah. Hemat tenaga!

3. useCallback: Simpan Fungsi Supaya Nggak Berubah

Saat pakai event handler dalam komponen child, setiap re-render bakal bikin fungsi baru, yang bisa bikin komponen child re-render juga. Nah, useCallback bantu mencegah itu!

Contoh Tanpa useCallback

import { useState } from "react";
import Child from "./Child";

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

  const handleClick = () => {
    console.log("Diklik!");
  };

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

export default App;

Setiap kali tombol ditekan, handleClick berubah dan bikin Child ikut re-render.

Pakai useCallback

import { useState, useCallback } from "react";
import Child from "./Child";

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

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

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

export default App;

Dengan useCallback, fungsi handleClick nggak berubah setiap render, jadi Child nggak re-render tanpa alasan.

4. Kapan Harus Pakai useMemo & useCallback?

Gunakan kalau:

• Ada perhitungan berat yang nggak perlu dilakukan ulang (useMemo)
• Ada fungsi yang dikirim ke child component (useCallback)

Jangan pakai kalau:

• Kode tetap ringan tanpa mereka
• Dipakai di tempat yang nggak butuh optimasi

5. Kesimpulan

• useMemo menyimpan hasil perhitungan supaya nggak dihitung ulang.
• useCallback menyimpan fungsi supaya nggak berubah di setiap render.
• Pakai hanya kalau performa aplikasi benar-benar butuh dioptimasi.

Dengan useMemo dan useCallback, aplikasi React-mu bakal lebih hemat tenaga dan nggak boros render!