Sejak React 16.8 ada fitur baru yang namanya hook. Kalo baca di dokumentasinya, tujuan utama fitur ini adalah supaya komponen-komponen fungsional ( yg ga dibikin pake class
) punya akses ke API life-cycle. Tapi dalam prakteknya, manfaat hook lebih dari sekedar life-cycle. Kita bisa pake hook untuk bikin blok logic yang bisa dipake di mana-mana. Kalo Anda pernah belajar Design Patterns, hook sekilas mirip dengan Strategy Pattern, cuma lebih simpel.
Hooks Bawaan React
Ada beberapa hook bawaan React yg relatif paling sering dipake yaitu useState
, useRef
, useEffect
, & useReducer
.
useState
Dalam versi React sebelumnya, komponen fungsional sering disebut juga stateless component karena ga punya state. Tapi istilah stateless ga lagi akurat karena ada useState
. Jadi sekarang semua komponen baik yang class-based ataupun yang functional bisa punya state.
Nilai balik dari fungsi useState()
adalah sebuah array yang isinya dua elemen. Elemen pertama adalah nama state, yang kedua adalah fungsi untuk meng-update state itu. Jadi baris 10 contoh kode di atas kalo dijabarin sama kayak begini:
const arr = useState(props.start);
const count = arr[0];
const setCount = arr[1];
Kita bisa panggil useState()
sebanyak yang kita perlu. Kalo komponen kita punya 3 state, ya boleh dipanggil 3x. Satu untuk masing-masing state.
useRef
Hook berikutnya adalah useRef
. Ini kita pake untuk bikin pointer (referensi) ke elemen DOM. Kalo di komponen yang class-based kita bisa pake createRef()
, di functional-component kita ga bisa pake itu. Kita harus pake useRef()
.
useEffect
useEffect
itu bisa jadi pengganti componentDidMount
, componentWillUnmount
, componentDidUpdate
, & componentWillReceiveProps
yang cuma ada di class-based component. Hook ini dijalanin pertama kali pas komponen ditampilin di app (mounted) & selama komponen belum dihapus bisa dijalanin lagi.
Hook ini punya dua parameter, yang pertama adalah callback untuk dipanggil pas hook dijalanin & yang kedua adalah dependency-array yang nentuin kapan hook ini dijalanin lagi. Kalo array ini kosong (baris 14 dalam contoh di bawah), berarti hook cuma dijalanin satu kali, mirip componentDidMount
. Kalo array ini ada isinya, hook akan dijalanin lagi setiap kali salah satu isi array ini berubah (baris 33 & 42), mirip componentDidUpdate
atau componentWillReceiveProps
.
Untuk pengganti componentWillUnmount
yang kita pake untuk “bersih-bersih” sebelum komponen dihapus dari aplikasi, kita tinggal bikin callback yang nilai baliknya adalah sebuah fungsi (baris 26).
useReducer
Pake useState
emang simpel, tapi bisa jadi rumit kalo :
1. state-nya banyak
2. Kita ada kode yang perlu meng-update beberapa state sekaligus
3. Ada computed-state ( state yang nilainya tergantung state lain )
Untuk kasus begini, kita bisa pake hook yang namanya useReducer
. Cara pakenya sama dengan reducer-nya Redux. Ada action & state.
Nilai balik useReducer()
adalah sebuah array, sama kayak useState()
, tapi isinya objek state
& fungsi dispatch
. Hook ini punya dua argumen, yang pertama fungsi reducer-nya, yang kedua state awalnya (initial state). Sama kaya Redux, fungsi reducer punya dua argumen, state & action dan nilai baliknya adalah state yang baru.
Custom Hook
Selain pake hook bawaan React, kita bisa bikin hook sendiri. Kita bisa bikin fungsi-fungsi kecil yang reusable, bisa dipake di banyak komponen. Sebagai contohnya, demo useReducer
di atas bisa kita jadiin custom hook yg namanya useCounter
kayak di bawah.
Hook yang lain
Masih ada beberapa hook lain bawaan React yang bisa kita pelajari. Daftarnya & contohnya bisa dibaca sendiri di sini. Dari daftar itu mungkin yang nanti kita perlu tau adalah useMemo
& useCallback
karena dua hook itu ada hubungannya sama optimasi. Nanti saya bahas dua hook itu di artikel yang lain.
Koleksi hook yang dibuat pihak ketiga bisa diliat-liat di sini: Awesome React Hooks.
Sekian. Moga-moga bermanfaat.
Also in this category ...
- » Rust 101: Hello Rust
- » JS : Pemrograman Asinkron
- » End-to-end Testing dengan The Intern
- » Cara Mudah Pakai Environment Variable dengan Webpack
- » ReactJS : Higher Order Component