Mengenal Lifecycle pada ReactJs

Akhir-akhir ini, saya bekerja untuk sebuah project web aplikasi yang mana UI library-nya menggunakan ReactJs. Awalnya, agak aneh sih nemuin istilah-istilah baru seperti componentDidMount, componentWillMount, dan lainnya. Tapi setelah belajar dan ngerjain proyek pakai React, saya merasa lebih nyaman karena React lebih fleksibel dibanding Angular yang saya tahu. Nah, untuk itu, kali ini kita coba bahas apa itu React lifecycle, cara kerjanya, dan kenapa bisa lebih baik dibandingkan framework lain.

Apa Itu React Lifecycle?

Oke, bayangin gini deh. Sebuah komponen React itu ibarat manusia, punya siklus hidup dari lahir, kemudian bertumbuh, dan meninggal dunia. Pada ReactJs, lifecycle ini menggambarkan tahapan-tahapan yang dilalui komponen, mulai dari pertama kali dirender di layar, sampai akhirnya dihapus.

Kenapa sih kita perlu tahu lifecycle ini? Karena dengan memahami lifecycle, kita bisa mengontrol perilaku komponen di setiap tahapannya, misalnya mengambil data dari server setelah komponen ditampilkan, atau membersihkan resource sebelum komponen dihapus.

Tahapan dalam React Lifecycle

Nah, lifecycle pada React terbagi menjadi tiga fase utama, yaitu:

• 1. Mounting: Fase ini terjadi ketika komponen pertama kali dirender di DOM. Ada beberapa method lifecycle yang bisa kita gunakan di fase ini, seperti:

  • constructor(): Method ini dipanggil pertama kali saat komponen dibuat. Biasanya kita gunakan untuk inisialisasi state awal dan method.

  • render(): Method wajib ada di setiap komponen React. Tugasnya merender tampilan komponen berdasarkan state dan props.

  • componentDidMount(): Method ini dipanggil setelah komponen selesai dirender di DOM. Biasanya kita gunakan untuk mengambil data dari API, atau melakukan manipulasi DOM.

// contoh constructor atau init
constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
}

// contoh mengambil data dengan fetch
componentDidMount() {
    console.log('Component did mount');
    // Misalnya, fetch data dari API
    this.fetchData();
}

• 2. Updating: Fase ini terjadi ketika state atau props komponen berubah. Method lifecycle yang bisa kita gunakan di fase ini, antara lain:

  • shouldComponentUpdate(): Method ini dipanggil sebelum proses render terjadi. Kita bisa gunakan untuk optimasi performa, dengan mencegah render yang tidak perlu.

  • componentDidUpdate(): Method ini dipanggil setelah proses update selesai.

// contoh shouldComponentUpdate 
shouldComponentUpdate(nextProps, nextState) {
    // Logic untuk menentukan apakah komponen perlu dirender ulang
    if (nextState.count !== this.state.count) {
      return true;
    }
    return false;
}

• 3. Unmounting: Fase ini terjadi ketika komponen dihapus dari DOM. Method lifecycle yang bisa kita gunakan di fase ini, yaitu:

  • componentWillUnmount(): Method ini dipanggil sebelum komponen dihapus dari DOM. Biasanya kita gunakan untuk membersihkan resource, seperti listener event atau timeout.

// contoh componentWillUnmount
componentWillUnmount() {
    // Dilakukan sebelum komponen dihapus dari DOM
    console.log('Component will unmount');
    // Misalnya, membersihkan interval atau timeout
    clearInterval(this.intervalId);
}

Kenapa Harus Tau React Lifecycle?

Menurut pengalaman saya, React lifecycle memberikan kita kontrol untuk bagaimana kita mengatur suatu komponen dalam bentuk informasi atau pun visual. Dengan memahami lifecycle, kita bisa menulis kode yang lebih efisien dan terstruktur. Selain itu, pemisahan method lifecycle yang jelas membuat kode lebih mudah dibaca dan dipahami, terutama untuk proyek besar. Dibandingkan dengan Angular, yang lifecycle-nya lebih 'implicit', React menawarkan transparansi dan kontrol yang lebih besar.

Tentu saja, dengan fleksibilitasnya ini kita bisa menyelesaikan pekerjaan lebih cepat. Tapi, untuk struktur kode, kita bisa mencontoh dari proyek-proyek open source bagaimana mereka menstruktur kode mereka agar lebih mudah dibaca oleh developer lain. Contoh nya seperti ini.

*Note: Artikel ini pertama kali saya publish di kodekoki.com