Component Lifecycle dalam ReactJS

   April 09, 2025       Mahatma Mahardhika

---

Component Lifecycle dalam ReactJS

Table of Contents

• Pengertian Component Lifecycle
• Fase-fase Component Lifecycle
• Metode Lifecycle pada Class Component
• Menggunakan useEffect sebagai Alternatif
• Contoh Penerapan
• Kesimpulan

---

Pengertian Component Lifecycle

Component Lifecycle dalam ReactJS mengacu pada serangkaian metode yang dipanggil selama siklus hidup suatu komponen. Lifecycle ini mencakup tahap mounting, updating, dan unmounting.

---

Fase-fase Component Lifecycle

• Mounting: Saat komponen pertama kali dimuat ke dalam DOM.
• Updating: Saat state atau props berubah dan menyebabkan re-render.
• Unmounting: Saat komponen dihapus dari DOM.

---

Metode Lifecycle pada Class Component

Dalam Class Component, terdapat metode lifecycle yang dapat digunakan:

• componentDidMount() – Dipanggil setelah komponen dimasukkan ke DOM.
• componentDidUpdate() – Dipanggil setiap kali komponen diperbarui.
• componentWillUnmount() – Dipanggil sebelum komponen dihapus dari DOM.

class LifecycleDemo extends React.Component {
  componentDidMount() {
    console.log("Komponen telah dimuat");
  }

  componentDidUpdate() {
    console.log("Komponen telah diperbarui");
  }

  componentWillUnmount() {
    console.log("Komponen akan dihapus");
  }

  render() {
    return 
Lifecycle React
;
  }
}

---

Menggunakan useEffect sebagai Alternatif

Pada Functional Component, useEffect digunakan sebagai pengganti lifecycle methods.

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

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

  useEffect(() => {
    console.log("Komponen telah dimuat");
    return () => console.log("Komponen akan dihapus");
  }, []);

  useEffect(() => {
    console.log("Komponen telah diperbarui");
  }, [count]);

  return (
    

      
Nilai: {count}
      
    
  );
};

---

Contoh Penerapan

Lifecycle method sering digunakan untuk:

• Fetching data dari API.
• Menjalankan operasi side-effect seperti event listener.
• Mengelola interval atau timeout dalam komponen.

---

Kesimpulan

Component Lifecycle dalam ReactJS memungkinkan pengelolaan komponen dengan lebih baik. Dalam Class Component, metode seperti componentDidMount dan componentDidUpdate digunakan, sementara dalam Functional Component, useEffect menjadi alternatif yang lebih modern.