React Hooks: useState dan useEffect
React memperkenalkan React Hooks di versi 16.8. Hooks pada dasarnya adalah function yang disediakan React untuk mempermudah kita dalam menggunakan state dan fitur React lain seperti lifecylce method, context dll. Hooks hanya bisa digunakan di dalam function component.
1. useState()
Digunakan untuk membuat dan mengupdate state.
Pada class component membuat dan mengupdate state harus dilakukan seperti ini:
Jika kita perhatikan code di atas terdapat tambahan keyword this untuk mengakses state dan menggunakan setState().
Keyword this kadang membuat bingung sebagian developer karena this pada JavaScript tidak selalu mengacu pada object dimana this digunakan.
Dengan menggunakan useState kita tidak perlu menambahkan keyword this.
Contoh 1:
Contoh 2:
Contoh 3:
Contoh 4:
Pada contoh 4, kita melakukan destructuring pada statenya, yaitu setState({...state, counter: state.counter + 1}); agar saat button addCounter di klik, masih ada foods di dalam state, bisa dilihat dengan melakukan console.log(state).
2. useEffect()
Memungkinkan untuk menambahkan side effect di function component dan juga bisa menjadi alternatif untuk lifecycle method componentDidMount() dan componentDidUpdate().
side effect pada react adalah function yang dieksekusi setelah render.
Contoh 1: useEffect(callbackFunction) tanpa dependency
Perintah kode (callback function) di dalam useEffect() akan dieksekusi setiap kali function TanpaDepedency dirender. Saat kita klik button Add Counter maka nilai state count akan berubah, sehingga function TanpaDependency akan dirender ulang dan useEffect() juga dirender ulang.
Contoh 2: useEffect(callbackFunction, dependency) dengan dependency kosong.
Perintah kode (callback function) di dalam function useEffect() akan dieksekusi hanya saat function DependencyKosong pertama kali dijalankan (dirender). Saat kita klik button Add Counter maka nilai state count akan berubah dan hal itu tidak akan membuat useEffect() di jalankan ulang.
Contoh 3: useEffect(callbackFunction, dependency) dengan dependency tidak kosong.
Perintah kode (callback function) di dalam function useEffect() akan dieksekusi setiap kali state count berubah karena pada contoh di atas, dependencynya adalah state count. Dependency bisa lebih dari satu, sehingga jika ada dua dependency pada kode di dalam useEffect() akan di eksekusi sebanyak 2x setiap kali dependencynya ada mengalami perubahan nilai pada statenya.
Dependency juga bisa berupa props, contohnya sebagai berikut:
Dependency pada contoh di atas berupa props yaitu level, sehingga jika props ini mengalami perubahan maka kode di dalam useEffect() akan dirender.
useEffect Clean Up Function
Untuk melakukan clean up function pada useEffect(), caranya dengan mereturn sebuah fungsi.
Contoh 1: Clean up function pada useEffect() tanpa dependency
Pada contoh di atas, useEffect akan dieksekusi setiap kali component CleanUp1 dirender (statenya berubah). Jadi, saat pertama kali component CleanUp1 dirender maka di console akan tampil "Component did mount", setelah itu setiap kali component CleanUp1 dirender ulang (rerender), maka di console akan tampil "Component unmount" kemudian "Component did mount".
Contoh 2: Clean up function pada useEffect() dengan dependency kosong
Pada contoh di atas, component CleanUpChild akan ditampilkan saat nilai state showChild di component CleanUp2 bernilai true, dan saat nilai state showChild adalah false, maka component CleanUpChild tidak tampil (diremove dari dom).
Hal di atas akan mentrigger useEffect hanya satu kali yaitu saat component CleanUpChild pertama kali di render, sehingga di console akan tampil "Component did mount once", dan saat button Show/Hide Child di klik, maka di console akan tampil "Component unmount once" (component CleanUpChild diremove dari dom, sehingga return dari component CleanUpChild di hide dari halaman web).
Saat kita klik button Add Counter maka nilai state count di component CleanUpChild akan berubah dan hal itu tidak akan merender ulang useEffect.
Contoh 3: Clean up function pada useEffect() dengan dependency kosong
Pada contoh di atas sama dengan contoh ke-2, yaitu useEffect() dengan dependency kosong. Pada contoh ini, saat halaman web di scroll maka di console akan tampil hasil dari event window scroll, dan saat button Show/Hide Child di klik (remove event), maka di console tidak akan tampil hasil dari event window scroll.
Contoh 4: Clean up function pada useEffect() dengan dependency kosong
Pada contoh di atas sama dengan contoh ke-2 dan ke-3, yaitu useEffect() dengan dependency kosong. Pada contoh ini, saat sedang proses loading (mengambil data/fetching data) kemudian kita klik button Show/Remove untuk menghentikan proses loading, maka tidak akan terjadi eror karena kita mereturn sebuah clean up function di dalam useEffect.
Contoh 5: Clean up function pada useEffect() dengan dependency kosong
Pada contoh di atas, useEffect akan dieksekusi setiap kali dependencynya berubah. Jadi, saat pertama kali component CleanUp5 dirender maka di console akan tampil "Component did mount on counter change", setelah itu jika kita klik button Add Counter maka akan mengubah nilai state, sehingga di console akan tampil "Component unmount on counter change" kemudian "Component did mount on counter change". Jika nilai dependency tidak berubah, maka return di useEffect tidak akan dieksekusi
Source:
https://devsaurus.com/react-hooks
https://www.youtube.com/watch?v=ioou87ehs5g&list=PLLhpK5IKtgqk-RDJiPL7JEwUxKhTHUqsn&index=1
0 Komentar