React Hooks: Menulis Komponen React dengan Lebih Sederhana

Sebelum React versi 16.8 dirilis, cara utama untuk membuat komponen yang memiliki state atau siklus hidup (lifecycle methods) adalah dengan menuliskannya dalam bentuk class component. Namun, pendekatan ini sering kali menghasilkan kode yang panjang, kurang intuitif, dan sulit dirawat, terutama dalam proyek berskala besar. Dengan hadirnya React Hooks, para pengembang diberi alternatif yang jauh lebih sederhana dan fleksibel dalam menulis komponen menggunakan function component. Hooks memungkinkan kita untuk mengakses fitur-fitur seperti state, efek samping, context, dan lainnya tanpa harus menggunakan class. Dua hook yang paling mendasar dan sering digunakan adalah useState dan useEffect. Hook useState memberikan kemampuan kepada komponen fungsional untuk menyimpan dan mengelola nilai state. Cara penggunaannya sangat sederhana dan jelas, misalnya ketika kita ingin membuat counter, cukup menggunakan sintaks seperti const [count, setCount] = useState(0), yang artinya kita memiliki variabel count dengan nilai awal 0, dan fungsi setCount untuk memperbaruinya. Di sisi lain, useEffect adalah solusi pengganti dari lifecycle methods seperti componentDidMount, componentDidUpdate, dan componentWillUnmount yang biasa digunakan dalam class. Dengan useEffect, kita dapat mengeksekusi side effects seperti mengambil data dari API, mengubah judul dokumen, menjalankan timer, atau mengatur event listener. Contohnya adalah useEffect(() => { document.title = Anda menekan ${count} kali; }, [count]), yang akan mengubah judul halaman setiap kali nilai count berubah. Dengan hanya dua hook ini, kita sudah bisa membangun aplikasi React yang kompleks tanpa harus berurusan dengan class, inheritance, dan this binding yang membingungkan. React Hooks telah merevolusi cara menulis komponen dan memungkinkan kita membuat kode yang lebih bersih, lebih modular, dan lebih mudah dipahami oleh tim.