Hooks

Hooks merupakan fungsi untuk “mengaitkan” state dan fitur-fitur lifecycle React dari function component. Hooks merupakan fitur baru di React versi 16.8 yang bersifat opsional dan tidak menyebabkan breaking changes. React menyediakan Hooks bawaan (useState dan useEffect) maupun dapat membuat Hooks sendiri.

State Hook

1. useState merupakan fungsi yang dipanggil untuk membuat state local pada suatu function component
2. useState hanya menerima 1 argument yaitu nilai awal state
3. useState akan mengembalikan dua hal: nilai state saat ini dan fungsi untuk memperbarui nilai tersebut

Komponen tanpa State Hook

Komponen dengan State Hook

Effect Hook

1. Effect Hook merupakan fungsi yang dipanggil untuk melakukan “efek samping” pada suatu function component
2. Hook ini memiliki fungsi yang sama dengan componentDidMount, componentDidUpdate, componentWillUnmount pada class component, tetapi disatukan menjadi useEffect
3. useState akan mengembalikan dua hal: nilai state saat ini dan fungsi untuk memperbarui nilai tersebut

Komponen tanpa Effect Hook

Komponen dengan Effect Hook

Aturan Penggunaan Hooks :

1. Hanya Panggil Hooks di Tingkat Atas
2. Jangan memanggil Hooks dari dalam loops, conditions, atau nested functions
3. Hanya Panggil Hooks dari Fungsi-Fungsi React
4. Jangan memanggil Hooks dari fungsi JavaScript biasa
5. Jangan memanggil Hooks dari class component

Kesimpulan

Hooks mendukung penggunaan state pada function component

Sumber Referensi : reactjs.org | reactrouter | tutorialspoint | w3schools