Hook React yang dipakai sehari-hari, dikelompokkan per tugas: menyimpan state, menjalankan effect, memoize, berbagi context, dan menjangkau di luar render. Setiap baris memasangkan hook dengan kegunaannya.
Hook adalah fungsi yang memungkinkan komponen fungsi mengakses fitur React: state, lifecycle, context, dan penalaan performa. Dua aturannya: panggil hook di level teratas (jangan pernah di dalam loop atau kondisi), dan panggil hanya dari fungsi React. Sisanya adalah memilih hook yang tepat untuk tugasnya.
Tabel referensi · 24 entri
React HooksExplained
24 of 24 rows
State
Menyimpan satu nilai yang memicu re-render saat berubah.
State lokal komponen: field formulir, toggle, counter.
Menyimpan state yang digerakkan oleh reducer action, seperti store kecil.
State dengan beberapa field terkait atau transisi kompleks.
Menyimpan nilai mutable yang TIDAK memicu re-render.
Wadah mutable, timer, dan akses DOM langsung lewat .current.
Effect
Menjalankan side effect setelah render, dengan cleanup opsional.
Mengambil data, subscription, dan sinkronisasi dengan sistem eksternal.
Fungsi yang dikembalikan effect berjalan sebelum effect berikutnya dan sekali lagi saat unmount.
Membongkar subscription dan timer, atau membatalkan fetch yang sedang berjalan.
Seperti useEffect, tapi berjalan sinkron setelah mutasi DOM.
Membaca atau menulis layout sebelum browser paint (toast, tooltip).
Event handler berjalan merespons aksi pengguna; effect berjalan setelah render untuk sinkronisasi.
Logika akibat pengguna milik handler, logika akibat render milik effect.
Di development, mem-mount komponen dua kali agar effect berjalan, dibersihkan, lalu berjalan lagi.
Menangkap subscription ganda dan cleanup yang hilang sebelum production.
Performa
Meng-cache nilai hasil hitung sampai dependensinya berubah.
Menghindari perhitungan mahal lintas render; ubah nilai di deps secara sengaja untuk membatalkan cache.
Meng-cache referensi fungsi sampai dependensinya berubah.
Callback stabil yang diteruskan ke anak memoized atau dipakai sebagai deps.
Melewati re-render komponen yang propnya tidak berubah.
Komponen anak yang berat; berikan fungsi perbandingan sebagai argumen kedua saat shallow equality tidak cukup (HOC, bukan hook).
Context dan handle eksternal
Membaca nilai context tanpa prop drilling.
Tema, locale, atau pengguna auth yang dibagikan di seluruh tree.
Menyesuaikan instance yang dilihat parent melalui ref.
Mengekspos API terfokus dari anak lewat forwardRef.
Concurrency dan lainnya
Menandai pembaruan state sebagai non-urgent agar UI tetap responsif.
Menjaga input tetap lincah saat list berat me-render ulang.
Menunda suatu nilai agar pembaruan bisa diinterupsi.
Debounce render mahal tanpa timer.
Menghasilkan id unik yang stabil untuk atribut aksesibilitas.
Menghubungkan label dan input lintas render server dan klien.
Membaca promise atau context saat render; satu-satunya hook yang bisa dipanggil bersyarat.
Membuka promise dengan Suspense, atau membaca context di dalam early return.
Menyimpan state yang digerakkan oleh form action, dengan flag pending disertakan.
Submit formulir yang mengembalikan error atau state terbaru untuk ditampilkan inline.
Me-render nilai optimis seketika, lalu kembali ke state nyata saat action selesai.
Menampilkan like atau pesan terkirim selagi permintaan servernya berjalan.
Membaca status pending dari <form> yang mengelilinginya, tanpa props.
Tombol submit yang menonaktifkan dirinya sendiri selagi form induknya disubmit.
Berlangganan ke store di luar React dan membaca satu snapshot yang konsisten.
API browser seperti status online, atau store state pihak ketiga.
Berjalan sebelum layout effect, dibuat untuk menyuntikkan aturan CSS-in-JS.
Pustaka style yang harus menyisipkan aturan sebelum layout dibaca.
Menampilkan label kustom untuk state internal hook di React DevTools.
Memberi label pada isi custom hook saat debugging.
Hook buatan sendiri yang menggabungkan hook bawaan untuk berbagi logika.
Perilaku stateful yang dapat dipakai ulang seperti useFetch atau useMediaQuery.