useEffect #Part3-hooks

Muhammad Al Ziqri
Nov 2 · 2 min read

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.

  1. 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…

Muhammad Al Ziqri

Written by

Front End Engineer at Tiket.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade