Belajar React Dasar #10: useEffect

• Apa Itu useEffect?
• Sintaks Dasar useEffect
• useEffect Tanpa Dependencies
• useEffect dengan Array Kosong []
• useEffect dengan Dependencies
• Membersihkan Efek (Cleanup)
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Form di React, bagaimana cara membuat controlled dan uncontrolled component.

Pada artikel kali ini, kita akan membahas salah satu hook paling penting di React, yaitu useEffect. Hook ini sangat berguna untuk menangani efek samping (side effect) di dalam component.

Apa Itu useEffect?

useEffect adalah hook bawaan React yang digunakan untuk menjalankan kode ketika:

• Component pertama kali dirender (mount).
• Component diperbarui (update).
• Component dihapus (unmount).

Contoh kasus yang biasa ditangani dengan useEffect:

• Mengambil data dari API.
• Menjalankan event listener.
• Mengatur timer atau interval.
• Mengupdate title halaman.

Sintaks Dasar useEffect

useEffect(() => {

  // kode yang dijalankan
  
}, [dependencies]);

• Fungsi pertama (callback) → berisi kode yang akan dijalankan.
• Array dependencies → menentukan kapan efek dijalankan.

useEffect Tanpa Dependencies

Jika kita tidak menuliskan dependencies, maka efek akan dijalankan setiap kali component dirender ulang.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Component dirender ulang");
  });

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

export default App;

Setiap kali kita klik tombol, useEffect akan dijalankan ulang.

useEffect dengan Array Kosong []

Jika kita memberikan array kosong sebagai dependencies, maka efek hanya dijalankan sekali, yaitu saat component pertama kali muncul (mount).

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Component pertama kali dimuat");
  }, []);

  return <h1>Hello React</h1>;
}

export default App;

Contoh penggunaan: memanggil API hanya sekali ketika aplikasi dijalankan.

useEffect dengan Dependencies

Jika kita menambahkan dependencies, maka efek hanya dijalankan ketika nilai dependencies berubah.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log(`Count berubah menjadi: ${count}`);
  }, [count]);

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

export default App;

Penjelasan:

• useEffect hanya berjalan ketika count berubah.
• Jika ada state lain, perubahan state itu tidak memicu efek ini.

Membersihkan Efek (Cleanup)

Kadang kita perlu membersihkan efek sebelum component dihapus. Ini bisa dilakukan dengan return function di dalam useEffect.

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const interval = setInterval(() => {
      console.log("Interval berjalan...");
    }, 1000);

    // cleanup: dijalankan ketika component di-unmount
    return () => {
      clearInterval(interval);
      console.log("Interval dihentikan");
    };
  }, []);

  return <h1>Lihat console untuk interval</h1>;
}

export default App;

Penjelasan:

• Kita membuat interval yang berjalan setiap detik.
• Saat component dihapus, fungsi cleanup akan dijalankan untuk menghentikan interval.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang useEffect, hook yang digunakan untuk menangani efek samping di React.

Kita sudah mencoba useEffect tanpa dependencies, dengan array kosong, dengan dependencies tertentu, serta cara melakukan cleanup.

Di artikel berikutnya, kita akan membahas tentang useRef, yaitu hook untuk menyimpan nilai yang tidak ikut memicu re-render, serta mengakses elemen DOM secara langsung.

Terima kasih