lifelong learner — urip iku urup, currently working on accenture.

React – component lifecycle

0
Degananda.com -

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);