React.memo: Stop Render yang Nggak Perlu - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenapa Harus Pakai React.memo?

Saat aplikasi React makin kompleks, ada banyak komponen yang nggak perlu ikut re-render setiap kali state berubah. Nah, React.memo adalah solusi buat nge-stop render yang nggak perlu supaya aplikasi tetap ringan dan cepat.

2. Contoh Masalah Tanpa React.memo

Misalnya kita punya komponen Child yang tampil di dalam App. Kalau App re-render, Child juga ikut re-render, meskipun props-nya nggak berubah.

Contoh Tanpa React.memo

import { useState } from "react";

function Child({ text }) {
  console.log("Child render");
  return <h2>{text}</h2>;
}

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

  return (
    <div>
      <Child text="Halo!" />
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default App;

Setiap kali tombol ditekan, App re-render, dan Child juga ikut re-render, padahal teks di dalamnya nggak berubah!

3. Solusi Pakai React.memo

Kita bisa membungkus Child dengan React.memo, supaya dia hanya re-render kalau props-nya berubah.

Contoh Pakai React.memo

import { useState, memo } from "react";

const Child = memo(({ text }) => {
  console.log("Child render");
  return <h2>{text}</h2>;
});

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

  return (
    <div>
      <Child text="Halo!" />
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default App;

Sekarang, Child tidak akan re-render jika teksnya tetap sama. Hanya App yang berubah saat tombol ditekan.

4. Kapan Harus Pakai React.memo?

Gunakan React.memo kalau:

• Komponen besar dan sering dipakai ulang.
• Props jarang berubah.
• Render ulang bisa berdampak ke performa.

Jangan pakai kalau:

• Komponennya kecil dan ringan.
• Props sering berubah.

5. Kesimpulan

• React.memo mencegah komponen re-render kalau props-nya sama.
• Bisa dipakai buat optimasi performa di komponen besar.
• Jangan overuse! Pakai hanya kalau memang perlu.

Dengan React.memo, kita bisa bikin aplikasi React lebih efisien dan nggak boros tenaga.