Berkenalan dengan React Hooks
React Hooks baru diperkenalkan pada tahun 2018. Hooks berfungsi untuk memasukkan ‘state’ pada functional component. Sebelum ada Hooks, untuk membuat sebuah component di React ada 2 metode, yang pertama pakai ‘Class Component’ dan yang kedua pakai ‘Functional Component’. Jika di dalam component yang kita buat harus stateful, maka yang dipakai adalah Class Component. Sedangkan jika stateless, kita bisa pakai Class Component dan Functional Component. Ternyata Class Component ini memiliki beberapa kendala seperti, lebih sulit dipelajari untuk pemula, component-component yang dibikin jadi sangat kompleks sehingga sulit untuk dipahami alurnya, component yang kompleks bisa menyebabkan ‘wrapper hell’, dan beberapa kendala lainnya.
Dari kendala-kendala itu, akhirnya tim developer React membuat terobosan dengan menciptakan React Hooks. Sederhananya, dengan hooks ini, kita bisa membuat stateful component dengan memakai Functional Component. Berikut adalah contoh sederhana component dengan memakai hooks.
Pada gambar diatas, kita import dulu ‘useState’, seperti terlihat pada baris pertama. UseState ini ditulis pada saat kita mau pasang stateful component pada functional component.
Kemudian di dalam functional component itu kita bisa deklarasikan sebuah variable seperti di contoh adalah ‘count’ yang merupakan inisial dari variable itu, kemudian ‘setCount’ yang nantinya dipakai sebagai pengubah nilai dari ‘count’ itu. Kemudian, panggil ‘useState’ yang telah kita import pada baris pertama tadi dan isi nilainya, seperti dicontoh adalah nilainya ‘0’.
Pada bagian di dalam return ini, kita panggil yang sudah kita deklarasikan. Kata ‘You clicked {count} times’ berarti yang pertama kali muncul dilayar nanti adalah ‘You clicked 0 times’, kenapa? karena kita memberi nilai ‘0’ pada deklarasi variable diatas.
Kemudian perhatikan pada tag button, ada property onClick yang berisi function, function inilah yang dipakai untuk mengubah nilai awal dari ‘count’. onClick={() => setCount(count + 1)}, jadi kita panggil ‘setCount’ kemudian dalam kurung kita bikin logika untuk mengubah nilai dari count tersebut, seperti dicontoh adalah ‘count + 1’ berarti nilai count tersebut akan bertambah 1 jika tombol yang bertuliskan ‘Click me’ dijalankan.
Penjelasan tentang hooks lebih dalam, bisa klik disini. Selamat Belajar!
