Implementasi Dasar React Hooks dan Context API (Bagian II)
Artikel ini merupakan lanjutan dari artikel yang saya sudah publish kemarin dari Implementasi Dasar React Hooks dan Context API (Bagian I)
Bagi kawan-kawan yang belum sempat melihat artikel sebelumnya, dapat melihatnya terlebih dahulu. Tapi kalau skip bagian I juga tidak apa. Karena saya merancang artikel ini agak terpisah dari bagian I.
Kali ini saya akan membahas fungsi atau function dari React Hooks yang jarang digunakan oleh React Developer lain namun penting untuk diketahui fungsi / function-nya. Siapa tau kawan-kawan di sini bisa menggunakannya untuk case-case tertentu.
Ada beberapa hooks pada React Hooks yang belum dibahas pada artikel sebelumnya, antara lain:
- UseRef
- UseMemo
- UseCallback
- UseReducer
Contoh demo keseluruhan kodingannya dapat dilihat di bawah ini
UseRef
UseRef sebenarnya mirip seperti UseState namun nilai (value) state hanya disimpan tanpa harus me-render kembali komponennya. Berbeda dengan UseState yang setiap kali ada manipulasi nilai-nya, maka akan me-render kembali komponen tersebut.
Untuk contoh implementasinya dapat dilihat pada kode di bawah ini.
Terlihat pada penggunaan UseRef, manipulasi nilai pada state hanya disimpan nilainya tanpa ada me-render kembali komponen tersebut. Berbeda dengan UseState, setiap kali nilai dimanipulasi, maka komponen akan me-render kembali.
UseMemo
Pada lifecycle React, React akan me-render ulang komponen apabila ada nilai state mengalami perubahan. Mungkin kejadian seperti ini tidak terlalu menganggu jika function yang dipanggil hanya satu kali pemanggilan.
Bagaimana jika function tersebut diterapkan berulang-ulang misalnya menggunakan iterasi atau loop? Maka hal tersebut dapat berdampak menurunnya performa, penggunaan memori yang berlebihan, dan hal-hal buruk lainnya dikarenakan render yang selalu berulang mengikuti jumlah loop yang sudah ditentukan sebelumnya.
Oleh karena itu React mengakalinya dengan membuat UseMemo agar komponen yang menggunakan dependency tersebut, tidak ikut te-render berulang-ulang.
Contoh sederhananya. Misalnya kita memiliki sebuah function untuk menghitung 1 + 1 yang akan mengembalikan sebanyak 2. Jika kita menggunakan UseMemo, saat render function selanjutnya, ketika ada perhitungan kembali 1 + 1, tidak perlu me-render ulang kembali komponen tersebut sudah disimpan hasilnya oleh function tersebut bahwa 1 + 1 = 2.
Untuk contoh implementasinya dapat dilihat pada kode di bawah ini.
UseCallback
Pada dasarnya, penggunaan UseCallback hampir sama dengan UseMemo. Bedanya, UseMemo mengembalikan nilai state sedangkan UseCallback mengembalikan callback. Secara pemanggilannya punya juga kurang lebih serupa.
Agar lebih paham perbedaan keduanya seperti apa, dapat lihat melalui tautan berikut https://medium.com/@jan.hesters/usecallback-vs-usememo-c23ad1dc60
UseReducer
Penggunaan UseReducer ini akan saya terapkan serupa dengan penggunaan Redux sebagai state management. Banyak cara untuk menjalankannya, namun karena saya sudah terbiasa dengan implementasi state management menggunakan Redux, saya akan menerapkan ala Redux.
Bentuk tree folder yang akan saya terapkan menggunakan useReducer bentuknya seperti ini
Usai penjelasan singkat beserta implementasi kodingannya untuk penggunaan React Hooks untuk empat additional Hooks yang telah dibahas sebelumnya.
Sampai jumpa di waktu berikutnya untuk membahas part ketiga.
