Memahami React Hooks: useState, useEffect, dan useContext

Revolusi Hooks di React

Sebelum Hooks diperkenalkan di React 16.8, logika stateful hanya bisa ditulis di class components. Hooks memungkinkan kita mengekstrak logika tersebut ke dalam fungsi yang dapat digunakan kembali, membuat kode lebih bersih dan mudah diuji.

useState: Mengelola State Lokal

Hook useState adalah yang paling sering digunakan. Ia mengembalikan sepasang nilai: state saat ini dan fungsi untuk memperbaruinya. Contoh sederhana: const [count, setCount] = useState(0). Setiap kali setCount dipanggil, React akan me-render ulang komponen dengan nilai baru.

useEffect: Menangani Side Effects

Hook useEffect digunakan untuk menangani side effects seperti fetching data, manipulasi DOM, atau subscription. Ia berjalan setelah setiap render secara default, namun kita bisa mengontrol kapan ia berjalan dengan dependency array.

useContext: Berbagi State Antar Komponen

Daripada melewatkan props secara manual melalui banyak level komponen (prop drilling), useContext memungkinkan kita mengakses nilai context dari mana saja dalam pohon komponen. Ini sangat berguna untuk tema, autentikasi, atau preferensi bahasa.

Custom Hooks

Salah satu kekuatan terbesar Hooks adalah kemampuan membuat custom hooks. Dengan mengekstrak logika ke dalam fungsi yang diawali dengan kata "use", kita bisa berbagi logika stateful antar komponen tanpa mengubah hierarki komponen.