Pada kesempatan ini Konsep Koding akan berbagi tutorial mengenai penggunaan Lifecyle atau siklus hidup pada React.JS disini saya akan menerangkan mengenai siklus hidup React.js dalam pattern Class Component, dimana bagi kamu yang baru belajar React, sebaiknya memahami Class Component agar mudah untuk mempelajari hooks atau materi React.js lainnya.

Apa Yang Akan Kita Pelajari?

1. Membuat Project React Baru

2. ComponentDidMount dan ComponentWillMount

3. ComponentDidUpdate

4. Kesimpulan

ReactJS Lifecycle Class



Membuat Project React Baru

Hal pertama yang harus kita lakukan sebelum mengikuti tutorial ini adalah kamu terlebih dahulu harus memiliki project React.js nah silahkan buat sebuah project React baru jika kamu belum meilikinya, silahkan buka terminal/cmd kamu dan ketikan perintah di bawah ini :

npx create-react-app my-app

cd my-app

npm start

Selamat anda telah berhasil membuat project React baru, dan anda bisa mengikuti tutorial ini, silahkan simak dengan baik tutorial selanjutnya. 


 ComponentDidMount dan ComponentWillMount

Apa itu ComponentDidMount?

componentDidmount adalah fase siklus hidup React ketika pertama kali DOM di render dan pada fase ini kamu dapat melakukan operasi sebelum elemen UI/JSX di muat. 


Apa itu ComponentWillMount?

componentWillMount adalah sebuah fase di mana semua data atau operasi di destroy atau di hancurkan misal kamu membuat sebuah interval pada halamn A dan saat kamu pergi ke halaman B, maka interval itu harus di destroy atau di hancurkan dengan componentWillMount jika tidak aka operasi tersebut akan berjalan di screen atau page lain.


Contoh penggunaan ComponentDidMount dan ComponentWillMount

Silahkan ubah file App.js menjadi seperti kode di bawah ini :



ComponentDidUpdate

Apa itu ComponentDidUpdate?


Contoh penggunaan ComponentDidUpdate

Sedangkan componentDidUpdate dipanggil setelah fungsi render. Serupa dengan componentDidMount, fungsi ini dapat digunakan untuk melakukan operasi DOM setelah data telah diperbaharui.




Kesimpulan

Kesimpulan dari percobaan di atas adalah untuk mengubah sebuah data dan state pada React kita harus menggunakan Lifecycle React, seperti pertama kali aplikasi di ubah dengan didMount, ketika aplikasi di destroy dengan willMount, dan untuk update state saat itu juga menggunakan didUpdate.

Sekian semoga dapat bermanfaat.


Baca Juga Tutorial React Lainnya

#1 Pengenalan ReactJS, Kekurangan Dan Kelebihan

#2 Tutorial ReactJS Memahami State Dan Props Serta Contoh