React Hooks: Menguasai useEffect (Panduan Santuy)

Halo, Sobat Koding! 👋

Inget kan kita pernah bahas State sebagai “ingatan” si komponen? Nah, hari ini kita bakal bahas soal “indera” atau “reaksi”-nya.

Kita bakal menyelami useEffect.

Banyak yang bilang hook satu ini membingungkan. “Kapan dia jalan?”, “Kok looping terus?!”, “Apaan sih array di belakangnya itu?“.

Santuy. Ambil kopi dulu. Kita bakal bikin ini jadi jelas banget. ☕

Apa itu “Side Effect”?

Sebelum masuk kodingan, kita bahas konsep dulu. Di React, tugas utama komponen itu ngerender UI (nampilin HTML).

Tapi kadang, komponen kamu butuh ngelakuin hal-hal di luar nampilin UI doang. Hal-hal kayak:

• Ngambil data dari API (fetch data dari server).
• Masang timer atau interval.
• Ubah judul dokumen (tab browser).
• Dengerin ukuran layar (resize events).

Ini semua disebut Side Effects. Ini kayak “misi sampingan” yang jalan barengan sama misi utama (rendering).

useEffect adalah alat yang dikasih React buat nanganin misi-misi sampingan ini.

1. Dasar: Cara Pakainya

Cara pakenya mirip useState, tinggal di-import.

import { useEffect, useState } from "react";

const Timer = () => {
  const [angka, setAngka] = useState(0);

  // Ini Effect-nya
  useEffect(() => {
    console.log("Effect jalan!");
    document.title = `Angka: ${angka}`;
  });

  return <button onClick={() => setAngka(angka + 1)}>Klik aku: {angka}</button>;
};

Tunggu, kapan ini jalan? Secara default (kayak kode di atas), useEffect jalan setiap kali habis render.

1. Komponen muncul (mount) -> Effect jalan.
2. Kamu klik tombol -> State berubah -> Re-render -> Effect jalan lagi.

Ini seringkali… kebanyakan. Kita biasanya gak mau fetch data tiap kali user ngeklik tombol sembarangan.

2. Dependency Array []: Mengontrol Kekacauan

Di sinilah kuncinya. Argumen kedua dari useEffect adalah sebuah array []. Ini ngasih tau React: “Woy, jalanin effect ini CUMA kalau barang-barang INI berubah.”

Skenario A: Array Kosong []

useEffect(() => {
  console.log("Aku cuma jalan SEKALI pas komponen muncul.");
}, []); // <--- Array kosong

Ini pas banget buat hal yang cuma perlu dilakuin sekali, kayak ngambil data pas halaman dibuka. Ini pengganti modern buat componentDidMount.

Skenario B: Mantau Variabel Tertentu

useEffect(() => {
  console.log("Aku jalan pas 'angka' berubah!");
}, [angka]); // <--- Mantau 'angka'

Sekarang, effect-nya jalan pas mount, DAN kapanpun angka berubah. Kalau angka tetep sama, React bakal skip effect-nya. Efisien kan? ⚡

3. Cleanup Function: Jangan Ninggalin Sampah

Bayangin kamu bikin pesta (effect). Pas pestanya udahan (komponen dicopot/unmount), kamu harus bersihin sampahnya.

Di kodingan, ini kejadian sama hal kayak Timer atau Event Listeners. Kalau gak dibersihin, mereka bakal jalan terus di background dan makan memori (memory leak).

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Tik Tok...");
  }, 1000);

  // Ini fungsi bersih-bersihnya
  return () => {
    clearInterval(timer); // Matiin timer-nya!
    console.log("Bersih-bersih beres!");
  };
}, []);

React manggil fungsi cleanup ini pas:

1. Komponen ilang dari layar (unmount).
2. Sebelum ngejalanin effect ulang (kalau dependency berubah).

Analogi Gampang 🧠

Bayangin useEffect itu kayak Sistem Penyiram Tanaman Pintar di kebunmu (komponen).

• Gak ada Array: Penyiram nyala terus-terusan non-stop. (Bahaya, kebunmu banjir).
• Array Kosong []: Penyiram nyala sekali pas baru dipasang, terus gak nyala lagi.
• Array isi [matahari]: Penyiram nyala cuma pas ada matahari.
• Cleanup: Matiin keran air biar gak bocor pas kamu pindah rumah.

Penutup

Itu dia! useEffect sebenernya cuma cara buat nyinkronin komponen kamu sama dunia luar.

1. Default: Jalan tiap render.
2. []: Jalan sekali pas mount.
3. [data]: Jalan pas data berubah.
4. Return function: Buat bersih-bersih.

Kuasai ini, dan kamu udah nguasain 80% tantangan React modern. Lain kali, mungkin kita coba bikin sesuatu yang nyata pake ini.

Selamat Ngoding! 🚀