Implementasi Dasar React Hooks dan Context API (Bagian I)
Halo gaes. Setelah beberapa bulan vakum nulis karena deadline beberapa project dari kantor yang super mepet, hari ini menyempatkan untuk menulis artikel teknis tentang dasar-dasar penggunaan React Hooks dan penggunaan Context API sebagai state management.
Karena saya orangnya cukup practical dan bukan teoritis banget di dunia ngoding, artikel ini tidak akan menjelaskan secara detil alur teknisnya seperti apa karena udah banyak panduan detilnya tersedia di mbah gugel.
Sebelum memahami penggunaan React Hooks, teman-teman yang membaca artikel ini diharapkan minimal punya ilmu dalam menerapkan React dengan berbasis class component.
Alasannya? Biar gak ketergantungan aja sama React Hooks. Supaya teman-teman kalau nemu error/bug, pas ada solusi di Google yang menggunakan class component, teman-teman gak bingung nerapinnya di React Hooks yang notabene berbasis functional component.
Oke langsung saja. Saya akan menguraikan apa saja yang akan dijelaskan di artikel ini sebagai berikut dan juga implementasinya yang sederhana.
Sebelum melihat uraian di bawah, saya akan langsung sediakan implementasi kodenya yang bisa dilihat di bawah ini.
UseState
UseState digunakan untuk menginisiasi nilai (value) state dan mengatur/memanipulasi nilainya tersebut dalam satu fungsi yang sama. Tidak perlu lagi mendeklarasi dua fungsi berbeda seperti yang ada di class component. Contoh kodingan dalam bentuk class component.
Sekarang kita lihat seberapa efisien kodingan kita jika kita menerapkan useState di functional component
Berkat useState, kita tidak perlu lagi repot-repot melakukan deklarasi dua fungsi yang berbeda untuk mengatur dan memanipulasi nilai state tersebut.
UseEffect
useEffect pada dasarnya berbasis lifecycle component di React. Bedanya, kalau di class component, lifecycle tersebut dipisah menjadi 3 fungsi berbeda yaitu: componentDidMount, componentDidUpdate, dan componentWillUnmount. Namun di useEffect, lifecycle tersebut dipadatkan menjadi satu fungsi.
UseEffect sering digunakan untuk memanggil data dari API yang akan ditampilkan langsung di komponen tersebut.
Saya di sini tidak akan membahas lebih detil alur lifecycle-nya dan penerapan lebih advanced-nya seperti apa. Anda bisa membaca sendiri di sini https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Contoh kodingan dalam bentuk class component.
Sekarang kita lihat seberapa efisien kodingan kita jika kita menerapkan useEffect di functional component.
Context API (Tanpa dan Dengan Menggunakan UseContext)
Ketika aplikasi yang kita buat semakin besar, kita jelas akan memerlukan state management. Mengapa? Karena manipulasi state-nya akan semakin banyak. Perpindahan state antar komponen juga akan semakin sering. Jika kita tidak menggunakan state management, maka kita akan kewalahan suatu saat nanti karena kita harus memikirkan komponen yang mana sebagai parent dan komponen mana sebagai child untuk memindahkan props yang dibawa dari parent ke child.
Jika aplikasinya belum terlalu besar, maka state management dengan library seperti Redux, itu tidak terlalu dibutuhkan. Oleh karena itu Context API yang disediakan sendiri oleh React, sangat handal untuk menangani kebutuhan ini.
Di sini kita akan menggunakan ContextAPI dengan consumer. Jika tanpa useContext, kita harus mengonsumsi state dari provider yang telah kita buat di App.js dengan menggunakan consumer yang kita deklarasikan di JSX komponen yang membutuhkan state tersebut.
Sekarang kita akan bandingkan menggunakan useContext
Dengan menggunakan useContext, kita bisa menggunakan state yang telah kita deklarasikan agar dapat kita konsumsi dalam function yang kita buat sebelum JSX agar kode kita menjadi lebih bersih dan rapi.
Bagian II akan saya tulis dan publish nantinya. Jadi, tunggu kabar selanjutnya yak!
