Mengenal useEffect Hooks pada React.js
Published: 2024-01-16 19:54:15



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`:

```jsx
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*:

```jsx
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 <u>membersihkan</u> sumber daya. Dengan memahami penggunaan `useEffect`, kita dapat membangun komponen React yang lebih fleksibel dan efisien.