useEffect untuk Menggantikan Lifecycle di Functional Component - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenapa Harus Pakai useEffect?

Sebelum React Hooks muncul, kita menggunakan class component untuk menangani lifecycle seperti componentDidMount, componentDidUpdate, dan componentWillUnmount. Tapi sekarang, dengan functional component, kita bisa menggantinya dengan useEffect!

Kenapa ini keren?  Lebih simpel dan mudah dibaca.  Tidak perlu bikin class dan this.  Bisa mengatur efek samping seperti API calls, event listener, atau interval dengan rapi.

2. Cara Kerja useEffect

import { useEffect } from "react";

const HaloDunia = () => {
  useEffect(() => {
    console.log("Komponen lahir!");
    return () => console.log("Komponen pulang!");
  }, []);

  return <h1>Halo, Dunia!</h1>;
};

Apa yang terjadi di sini?

• React menjalankan useEffect saat komponen pertama kali muncul (componentDidMount).
• Saat komponen dihapus dari layar, kode di dalam return () => {} akan dijalankan (componentWillUnmount).

3. useEffect Sebagai Pengganti Lifecycle di Class Component

Mari kita bandingkan class component vs functional component!

Versi Class Component

import React, { Component } from "react";

class KomponenKuno extends Component {
  componentDidMount() {
    console.log("Komponen lahir!");
  }

  componentWillUnmount() {
    console.log("Komponen pulang!");
  }

  render() {
    return <h1>Halo, Dunia!</h1>;
  }
}

Versi Functional Component

import { useEffect } from "react";

const KomponenModern = () => {
  useEffect(() => {
    console.log("Komponen lahir!");
    return () => console.log("Komponen pulang!");
  }, []);

  return <h1>Halo, Dunia!</h1>;
};

Apa bedanya?

• Class component butuh lebih banyak kode (harus bikin class, this, dan lifecycle methods).
• Functional component lebih ringkas dan mudah dibaca.

4. useEffect untuk Menangani Perubahan Data (componentDidUpdate)

Kita bisa menggunakan useEffect untuk merespons perubahan state atau props, seperti componentDidUpdate di class component.

import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

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

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

 Kenapa ada [count] di useEffect?

• Agar efek hanya dijalankan saat count berubah.
• Mirip dengan componentDidUpdate di class component.

5. useEffect untuk Membersihkan Efek Samping (componentWillUnmount)

Misalnya kita punya interval yang perlu dihentikan saat komponen dihapus:

import { useState, useEffect } from "react";

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);

    return () => clearInterval(interval); // Hentikan interval saat komponen dihapus
  }, []);

  return <h1>Waktu: {count}</h1>;
};

 Apa yang terjadi?

• Saat komponen muncul, setInterval dijalankan.
• Saat komponen dihapus, clearInterval(interval) dipanggil agar tidak boros memori.

6. Kesimpulan

 useEffect menggantikan componentDidMount, componentDidUpdate, dan componentWillUnmount dengan lebih simpel.  Gunakan useEffect(() => {...}, []) untuk efek yang hanya dijalankan sekali (mirip componentDidMount).  Gunakan useEffect(() => {...}, [state]) untuk memantau perubahan state atau props (mirip componentDidUpdate).  Gunakan return function dalam useEffect untuk membersihkan efek samping (mirip componentWillUnmount).

Dengan memahami useEffect, kita bisa membuat aplikasi React yang lebih efisien dan mudah dikelola!