Mengenal Penggunaan useEffect di ReactJS

Selain useState, hooks penting di ReactJS lainnya adalah useEffect. Hooks ini memungkinkan penggunaan efek samping dalam komponen React dan membantu mengelola state serta memperbarui tampilan website secara dinamis (fetching data).

Mari kita pelajari lebih lanjut tentang penggunaan useEffect di ReactJS.

Apa itu useEffect?

useEffect adalah hook di ReactJS yang digunakan untuk mengelola efek samping atau side effect pada komponen React. Efek samping adalah perubahan yang terjadi di luar komponen, seperti mengambil data dari API, melakukan animasi, atau mengubah title pada dokumen HTML. useEffect digunakan untuk menangani efek samping tersebut agar tampilan website dapat diperbarui secara dinamis.

Bagaimana Menggunakan useEffect?

useEffect menerima dua parameter: fungsi efek samping dan array dependencies. Fungsi efek samping adalah kode yang akan dieksekusi setiap kali komponen dirender, sedangkan array dependencies adalah daftar nilai yang, jika berubah, akan memicu eksekusi fungsi efek samping.

Contoh penggunaan useEffect adalah sebagai berikut:

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

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

  // useEffect akan dieksekusi setiap kali nilai count berubah
  useEffect(() => {
    document.title = `Anda mengklik ${count} kali`;
  }, [count]);

  return (
    <div>
      <p>Anda mengklik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik saya
      </button>
    </div>
  );
}

Pada contoh di atas, kita menggunakan useEffect untuk mengubah title pada dokumen HTML setiap kali nilai count berubah. Dalam kasus ini, kita menggunakan array dependencies [count] untuk memastikan bahwa useEffect hanya dieksekusi ketika nilai count berubah.

Keuntungan Menggunakan useEffect

Penggunaan useEffect memiliki beberapa keuntungan, di antaranya:

1. Menghindari kebocoran memori (memory leaks) karena useEffect membantu menghapus event listener atau timer yang tidak diperlukan lagi.

2. Menghindari rendering yang tidak perlu karena useEffect hanya dieksekusi ketika nilai dependencies berubah.

3. Membantu memperbarui tampilan website secara dinamis dengan menangani efek samping di luar komponen.

Kesimpulan
Itulah dia pembahasan singkat mengenai useEffect dan cara menggunakannya. Untuk menggunakan useEffect, kita harus menentukan fungsi efek samping dan array dependencies.

Penggunaan useEffect memiliki beberapa keuntungan, seperti menghindari kebocoran memori dan rendering yang tidak perlu. Dengan demikian, useEffect dapat membantu meningkatkan kinerja dan fungsionalitas website yang dibangun.