Beda penggunaan Component Lifecycle antara Class Component dan Function Component (Hooks) di React

Berikut perbandingan penggunaan Component Lifecycle antara Class Component dan Function Component (Hooks) di React, disertai contoh kode dan ilustrasi sederhana agar mudah dipahami.

---

1. Tabel Perbandingan

Aspek	Class Component	Function Component (Hooks)
Pendefinisian Komponen	Menggunakan class dan extends React.Component	Menggunakan function atau arrow function
Inisialisasi State	this.state = { ... } di constructor	const [state, setState] = useState(...)
Akses Props	this.props	langsung props sebagai parameter
Lifecycle utama	componentDidMount, componentDidUpdate, componentWillUnmount	useEffect(() => {...}, [...])
Cleanup (pembersihan efek)	componentWillUnmount	return di dalam useEffect
Sederhana / Modern	Lebih panjang dan verbose	Lebih ringkas dan mudah dibaca
Kebutuhan ‘this’	Ya, wajib bind this	Tidak ada this
Versi React	Sebelum React 16.8	Setelah React 16.8 ke atas

---

2. Ilustrasi Sederhana: “Timer Component”

Kita akan buat komponen yang menampilkan waktu dan bertambah setiap detik.

---

a. Class Component

import React from "react";

class TimerClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    // Sama seperti useEffect(() => {}, [])
    this.interval = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    // Sama seperti cleanup di useEffect
    clearInterval(this.interval);
  }

  render() {
    return <h1>Timer (Class): {this.state.count}</h1>;
  }
}

export default TimerClass;

Penjelasan lifecycle-nya:

1. constructor → inisialisasi state.

2. componentDidMount → dijalankan setelah komponen muncul di layar (set interval).

3. componentWillUnmount → dijalankan sebelum komponen dihapus (bersihkan interval).

---

b. Function Component (Hooks)

import React, { useState, useEffect } from "react";

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

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

    // Sama seperti componentWillUnmount
    return () => clearInterval(interval);
  }, []); // [] berarti hanya sekali saat mount

  return <h1>Timer (Function): {count}</h1>;
}

export default TimerFunction;

Penjelasan lifecycle-nya:

1. useEffect dengan [] → dijalankan sekali saat komponen muncul.

2. return di dalam useEffect → cleanup saat komponen dihapus.

---

3. Ilustrasi Visual (Sederhana)

Class Component:                   Function Component:

Mount → componentDidMount()        Mount → useEffect(() => {...}, [])
Update → componentDidUpdate()      Update → useEffect(() => {...}, [deps])
Unmount → componentWillUnmount()   Unmount → return () => {...}

---

4. Kesimpulan

• Class Component lebih verbose, cocok untuk proyek lama.

• Function Component dengan Hooks lebih ringkas, modern, dan direkomendasikan.

• Lifecycle lama (componentDidMount, dll.) sekarang digantikan oleh kombinasi useEffect dengan dependency array.