useEffect #Part3-hooks
Class React memiliki lifecycle method seperti componentDidMount, componentDidUpdate dan componentWillUnmount. Sementara itu React Hooks memiliki useEffect yang dapat dikatakan sebagai lifecycle.
useEffect memiliki dua buah parameter, parameter pertama berupa callback function yang akan di jalankan setiap useEffect terpanggil dan parameter kedua berupa array yang digunakan untuk menjadi penentu kapan useEffect akan di jalankan kembali.
Notes : dalam sebuah function, dapat menggunakan lebih dari satu useEffect

Di atas saya sudah menjelaskan bahwa useEffect merupakan lifecyle untuk React Hooks, dan saya akan memberi contoh bagaimana menjadikannya layaknya lifecycle method.
- componentDidMount
Untuk menjadikannya seperti componentDidMount, kamu cukup memberikan nilai pada parameter kedua berupa array kosong, seperti pada gambar di atas. Menambahkan array kosong pada parameter kedua akan membuatnya hanya di jalankan satu kali ketika component di gunakan.
2. componentDidUpdate
Pada componentDidUpdate biasanya kita akan mendeteksi suatu perubahan value untuk menentukan aksi selanjutnya, sebagai contoh setiap ada perubahan nilai count, saya akan menambahkan console.log untuk perubahan nilai yang terbaru, jika menggunakan React class pada method componentDidUpdate, kita akan melakukan hal seperti berikut.
maka, jika menggunakan React hooks, code dapat di tulis menjadi seperti berikut :
cukup simple bukan, parameter kedua pada useEffect sama dengan saat kita membandingkan `prevValue` dengan `currentValue`.
[count] pada useEffect sama halnya dengan prevState.count !== this.state.countpada componentDidUpdate.
3. componentWillUnmount
Sebelum mengetahui bagaimana cara menggunakan componentWillUnmount pada React hooks, saya akan merubah sedikit component pada contoh sebelumnya menjadi seperti berikut :
Perubahan yang saya lakukan adalah memisahkan Countmenjadi sebuah function baru, lalu pada function yang memanggil Countsaya menambahkan tombol untuk show/hide Count.
Untuk membuat useEffect selayaknya componentWillUnmount, kita hanya perlu menambahkan return function pada callback function di parameter pertama useEffect, dapat dilihat pada code berikut.
Dalam return function kita dapat melukan hal-hal yang biasa dilakukan saat menggunakan method componentWillUnmount, seperti melakukan pembersihan pada subscriptions sebagai contoh removeEventListener, clearTimeout dan lainnya.
coming soon useContext…
