Lifecycle Komponen

Lifecycle adalah class yang menyimpan informasi tentang status siklus proses suatu komponen (seperti aktivitas atau fragmen) dan memungkinkan objek lain untuk mengamati status ini.

Lifecycle Komponen

Masing-masing komponen memiliki beberapa “metode lifecycle” yang bisa ditimpa untuk menjalankan kode pada waktu proses tertentu

Waktu proses dibagi menjadi 3, yaitu:
  1. Pemasangan (Mounting) > proses ketika instance komponen sedang dibuat
  2. Pembaruan (Updating) > proses ketika terjadi perubahan props atau state
  3. Pelepasan (Unmounting) > proses ketika komponen sedang dihapus dari DOM
Lifecycle Komponen

Lifecycle Komponen

Metode yang sering digunakan antara lain:
  1. constructor
  2. render
  3. componentDidMount
  4. componentDidUpdate
  5. componentWillUnmount

Penjelasan Metode
  1. constructor
    • Konstruktor dalam komponen React dipanggil sebelum dipasang (mounted)
    • Kontruktor perlu diimplementasi bila dilakukan inisialisasi state atau mem-bind metode
    • Hindari menyalin props ke stateLifecycle Komponen
  2. render
    • Wajib dimiliki dalam komponen kelas
    • Metode ini akan memeriksa this.props dan this.state
    • Metode ini akan mengembalikan tipe berikut:
      • Elemen React
      • Array dan fragment
      • Portal
      • String dan angka
      • Boolean atau null
  3. componentDidMount
    • Metode ini dipanggil setelah komponen di pasang di DOM.
    • Tempat yang baik untuk:
      • Inisialisasi request ke API
      • Mempersiapkan subscription
      • Memicu proses render ekstraLifecycle Komponen
  4. componentDidUpdate
    • Metode ini dipanggil setelah terjadi perubahan props atau state pada komponen
    • Perlu membandingkan props saat ini dengan props sebelumnya agar menghindari infinite loopLifecycle Komponen
    • Metode ini dipanggil sebelum komponen dilepas dan dihancurkan
    • Digunakan untuk membersihkan semua subscription yang dibuat dalam componentDidMount
    • Tidak boleh memanggil setState() karena komponen tidak akan dirender ulangLifecycle Komponen

Kesimpulan

Terdapat metode yang dapat digunakan untuk mengelola logika di komponen pada waktu-waktu lifecycle (mounting, updating, dan unmounting)