Bab 4: Effect Hook `useEffect`

Menjalankan (efek samping) dan berinteraksi dengan sistem di luar React.

Apa itu Efek Samping?

Dalam React, (efek samping) (*side effect*) adalah operasi apa pun yang memengaruhi sesuatu di luar lingkup komponen itu sendiri. Contoh umumnya adalah:

Mengambil data dari API server.
Mengatur atau membersihkan *event listener* (misalnya, `window.addEventListener`).
Mengubah judul dokumen (`document.title`).

Hook useEffect memberikan kita tempat yang aman untuk menjalankan kode-kode ini tanpa mengganggu proses render.

Cara Kerja `useEffect`

`useEffect` menerima dua argumen: sebuah fungsi (efeknya) dan sebuah array dependensi (opsional).

Sintaks Dasar

import { useEffect } from 'react';

useEffect(() => {
  // Kode efek samping Anda di sini...
  
  return () => {
    // (Opsional) Fungsi cleanup di sini...
  };
}, [dependencies]); // <-- Array Dependensi

Array dependensi mengontrol **kapan** efek Anda dijalankan kembali:

Tidak ada array: Efek berjalan setelah **setiap** render. (Jarang digunakan)
Array kosong (`[]`): Efek hanya berjalan **satu kali** setelah render pertama.
Array berisi nilai (`[prop, state]`): Efek berjalan kembali **hanya jika** salah satu nilai di dalam array berubah.

Contoh: Mengambil Data dari API

Ini adalah kasus penggunaan `useEffect` yang paling umum. Kita akan mengambil kutipan acak dari API publik.

Contoh Kode:

function QuoteFetcher() {
  const [quote, setQuote] = useState(null);
  const [fetchTrigger, setFetchTrigger] = useState(0);

  useEffect(() => {
    // Di sini kita akan mengambil data dari API
    // atau mensimulasikannya seperti contoh di atas.
    fetch('https://api.quotable.io/random')
      .then(res => res.json())
      .then(data => setQuote(data));
  }, [fetchTrigger]);

  return (
    <div>
      {quote && <p>"{quote.content}"</p>}
      <button onClick={() => setFetchTrigger(c => c + 1)}>
        Dapatkan Kutipan Baru
      </button>
    </div>
  );
}

Hasil Tampilan Interaktif:

Memuat kutipan...