Mengenal useEffect Hooks pada React.js

React.js adalah library JavaScript yang populer untuk membangun antarmuka pengguna (UI) interaktif. Salah satu fitur yang kuat dalam React adalah hooks, yang memungkinkan kita mengelola state dan efek di dalam komponen fungsional. Salah satu hook yang sering digunakan adalah useEffect. Dalam artikel ini, kita akan menjelajahi penggunaan useEffect dalam React.js.

Apa itu useEffect?

useEffect adalah salah satu hook yang disediakan oleh React untuk melakukan efek samping (side effect) dalam komponen. Efek samping ini bisa berupa melakukan request HTTP, berlangganan ke data waktu nyata (real-time data), mengubah judul halaman, atau melakukan operasi lain di luar lingkup render normal komponen.

Mengapa Menggunakan useEffect?

Dalam komponen React, kita sering perlu melakukan tindakan yang tidak terkait langsung dengan tampilan komponen, seperti mengatur event listener, berlangganan ke data dari server, atau membersihkan sumber daya ketika komponen dihapus. useEffect memungkinkan kita melakukan tindakan-tindakan ini dengan mudah dan terorganisir di dalam komponen fungsional.

Menggunakan useEffect

Berikut adalah sintaks dasar penggunaan useEffect:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Tindakan yang ingin dilakukan
    // ...

    // Membersihkan efek jika komponen dihapus
    return () => {
      // Membersihkan tindakan yang dilakukan
      // ...
    };
  }, []); // Array kosong menandakan bahwa efek hanya dijalankan sekali saat komponen dimuat

  return (
    // JSX komponen
  );
}

Kode di atas menunjukkan sebuah komponen fungsional MyComponent dengan penggunaan useEffect. Di dalam blok efek, kita dapat mengeksekusi tindakan yang diinginkan. Misalnya, kita dapat memanggil API, mengubah judul halaman, atau menambahkan event listener. Kemudian, kita juga dapat menggunakan return statement dari blok efek untuk membersihkan tindakan yang telah dilakukan ketika komponen dihapus.

Menentukan Dependency Array

Selain itu, kita juga dapat menentukan dependency array sebagai argumen kedua dari useEffect. Dependency array adalah array yang berisi nilai-nilai yang dijadikan acuan oleh efek tersebut. Jika salah satu nilai dalam dependency array berubah, efek akan dijalankan kembali. Contoh penggunaan dependency array:

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

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

  useEffect(() => {
    // Tindakan yang ingin dilakukan ketika count berubah
    console.log('Nilai count berubah');
  }, [count]); // Efek akan dijalankan kembali jika nilai count berubah

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

Pada contoh di atas, efek akan dijalankan kembali jika nilai count berubah. Ketika tombol "Tambah Count" ditekan, nilai count berubah dan efek dijalankan kembali, sehingga pesan "Nilai count berubah" akan ditampilkan pada konsol.

Kesimpulan

useEffect adalah hook yang kuat dalam React.js untuk melakukan efek samping dalam komponen fungsional. Dengan menggunakan useEffect, kita dapat melakukan tindakan yang tidak terkait langsung dengan tampilan komponen, seperti mengambil data dari server, mengubah judul halaman, atau membersihkan sumber daya. Dengan memahami penggunaan useEffect, kita dapat membangun komponen React yang lebih fleksibel dan efisien.