Komponen dalam SPA (Single page application) pasti memiliki siklus hidup atau lifecycle. Tanpa adannya life cycle SPA tidak dapat mengelola komponen-komponen ysng saat itu ditampilkan kepada user. Bagaimanakah lifecycle yang ada pada react ? simak ulasan ini.
React component
Adannya komponen pada react memberikan kita kemampuan untuk menggunakan kembali komponen yang ada (reuseable) serta memecah / membagi user inteface (UI) menjadi bagian-bagian yang kecil. React component merupakan komponen yang dihasilkan pada modul react. Untuk mendefinisikan komponen pada react kode yang kita gunakan adalah
class Helloworld extends React.Component {
render() {
return (
<h1>hello world hehehe..</h1>
)
}
}
dari kode diatas kita tahu bahwa sesungguhnya react.component adalah parent dari suatu yang class hendak dijadikan sebagai component. Pada konsep inheritances ini berarti class Helloworld tersebut akan mewarisi seluruh fungsi ataupun property yang ada pada class React.component. Dari sinilah class Helloworld ini bersifat sebagai component.
React Component lifecycle
Terdapat beberapa fungsi / method yang berasal dari clas React.component yang akan dieksekusi sebelum komponen dibuat , saat komponen dibuat ataupun sesudah komponen tersebut telah dibuat. Fungsi / method tersebutlah yang kita sebut sebagai “React component lifecycle”. React fungsi/method membaginnya berdasarkan fase-fase tertentu.
Mounting
“mounting” adalah method yang dieksekusi saat object komponen sedang dibuat dan dimasukan ke dalam DOM. Daftar method yang berada dalam fase ini adalah
| Method / lifecycle | Deskripsi |
| Constructor() | Layaknya pada object oriented programming, fungsi ini yang pertama kali dijalankan saat suatu object dibuat atau mengalami instansiasi |
| ComponentWillMount() | Fungsi yang dieksekusi sebelum proses rendering dijalankan / proses mounting. |
| ComponentDidMount() | Fungsi yang dieksekusi setelah render pertama kali dilakukan (render terhadap komponen tersebut). Pada lifecycle inilah http request / ajax ataupun pergantian state dilakukan mengingat pada lifecycle ini komponen telah masuk ke DOM / already mounted. |
| render() | lifecycle yang mengakses state dan props. Digunakan untuk merender komponen ke DOM. Kita dapat memanggil jsx ataupun logical statement disini |
Updating
Komponen pada react memiliki state dan props. Dimana props adalah data yang immutable a.k.a tidak dapat berubah sedangkan state adalah data yang dapat berubah. Terdapat beberapa lifecycle saat komponen tersebut melakukan “perubahan” pada dirinnya.
| Method / lifecycle | Deskripsi |
| componentWillRecieveProps() | Method yang akan dieksekusi saat props “diupdate” oleh parent dan komponen yang bertindah menjadi child akan menjalankan fungsi ini. |
| shouldComponentUpdate() | Method yang mereturn nilai boolean (true ataupun false). Fungsi ini yang akan memberikan keputusan apakah komponen tersebut perlu diupdate atau tidak. |
| componentWillUpdate() | Method yang akan dieksekusi sesaat sebelum melakukan rendering |
| render() | lifecycle yang mengakses state dan props. Digunakan untuk merender komponen ke DOM. Kita dapat memanggil jsx ataupun logical statement disini. Render tidak hanya dijalankan saat mounting namun ketika terjadi perubahan secara otomatis render() juga akan dilakukan untuk mengupdate dom. React hanya merubah element yang mengalami perubahan. |
| componentDidUpdate() | Method yang akan dieksekusi sesaat setelah melakukan rendering |
Unmounting
Merupakan fase dimana komponen ditarik dari DOM atau saat komponen tersebut dihancurkan dari DOM. Sangat cocok untuk melakukan unsubscribe pada suatu observable (jika menggunakan rxjs).
| Method / lifecycle | Deskripsi |
| componentWillUnmount() | method yang dipanggil setelah komponen ditarik / dihancurkan dari DOM. Untuk melakukan unmounting dapat kita panggil dari main.js/index.js. Ingat bahwa proses unmounting dan componentWillUnMount() merupakan fungsi yang berbeda. componetWillUnmount() merupakan reaksi yang dapat terjadi setelah kita melakukun unmounting. Singkatnya unmounting akan mentrigger componentWillUnMount(). |
kode untuk melakukan unmounting pada app.js / main.js adalah
ReactDOM.unmountComponentAtNode('component ID pada DOM');}, 10000);