React HooksExplained

24 of 24 rows

Hook↕	Apa yang dilakukannya↕	Gunakannya untuk↕
State
⤢useState	Menyimpan satu nilai yang mencetuskan semula render apabila ia berubah.	State setempat komponen: medan borang, togol, pengira.
⤢useReducer	Menyimpan state yang digerakkan oleh reducer action, seperti store kecil.	State dengan beberapa medan berkaitan atau peralihan kompleks.
⤢useRef	Menyimpan nilai boleh ubah yang TIDAK mencetuskan semula render.	Bekas boleh ubah, pemasa, dan akses DOM terus melalui .current.
Effect
⤢useEffect	Menjalankan kesan samping selepas render, dengan pembersihan pilihan.	Mendapatkan data, langganan, dan penyegerakan dengan sistem luaran.
⤢Effect cleanup	Fungsi yang dikembalikan oleh effect berjalan sebelum effect seterusnya dan sekali lagi semasa unmount.	Membongkar langganan dan pemasa, atau membatalkan fetch yang sedang berjalan.
⤢useLayoutEffect	Seperti useEffect, tetapi tercetus secara segerak selepas mutasi DOM.	Membaca atau menulis susun atur sebelum pelayar melukis (toast, tooltip).
⤢useEffect vs handlers	Pengendali acara berjalan sebagai tindak balas kepada tindakan pengguna; effect berjalan selepas render untuk menyegerak.	Logik punca pengguna milik pengendali, logik punca render milik effect.
⤢StrictMode	Dalam pembangunan, memasang komponen dua kali supaya effect berjalan, dibersihkan, lalu berjalan semula.	Mengesan langganan berganda dan pembersihan yang hilang sebelum produksi.
Prestasi
⤢useMemo	Menyimpan nilai terhitung dalam cache sehingga kebergantungannya berubah.	Mengelak pengiraan semula yang mahal merentas render; ubah satu nilai dalam deps secara sengaja untuk membatalkan cache.
⤢useCallback	Menyimpan rujukan fungsi dalam cache sehingga kebergantungannya berubah.	Callback stabil yang dihantar kepada anak termemo atau digunakan sebagai deps.
⤢React.memo	Melangkau render semula komponen yang propsnya tidak berubah.	Komponen anak berat; berikan fungsi perbandingan sebagai argumen kedua apabila kesamaan cetek tidak memadai (HOC, bukan hook).
Context dan handle luaran
⤢useContext	Membaca nilai context tanpa prop drilling.	Tema, locale, atau pengguna auth yang dikongsi merentas pokok.
⤢useImperativeHandle	Menyesuaikan instans yang dilihat oleh parent melalui ref.	Mendedahkan API tertumpu daripada anak melalui forwardRef.
Concurrency dan lain-lain
⤢useTransition	Menandakan kemas kini state sebagai tidak mendesak supaya UI kekal responsif.	Mengekalkan input ligat sementara senarai berat di-render semula.
⤢useDeferredValue	Melengahkan satu nilai supaya kemas kini boleh diinterupsi.	Debounce render mahal tanpa pemasa.
⤢useId	Menjana id unik yang stabil untuk atribut kebolehcapaian.	Menghubungkan label dan input merentas render pelayan dan klien.
⤢use()	Membaca promise atau context semasa render; satu-satunya hook yang boleh dipanggil bersyarat.	Membuka promise dengan Suspense, atau membaca context dalam early return.
⤢useActionState	Menyimpan state yang digerakkan oleh form action, dengan bendera pending disertakan.	Penghantaran borang yang mengembalikan ralat atau state terkini untuk dipaparkan secara inline.
⤢useOptimistic	Merender nilai optimistik serta-merta, kemudian kembali kepada state sebenar apabila action selesai.	Memaparkan like atau mesej terhantar sementara permintaan pelayannya sedang berjalan.
⤢useFormStatus	Membaca status pending bagi <form> yang mengelilinginya, tanpa props.	Butang hantar yang melumpuhkan dirinya sendiri sementara borang induknya dihantar.
⤢useSyncExternalStore	Melanggan store di luar React dan membaca satu snapshot yang konsisten.	API pelayar seperti status dalam talian, atau store state pihak ketiga.
⤢useInsertionEffect	Berjalan sebelum layout effect, dibuat untuk menyuntik peraturan CSS-in-JS.	Pustaka gaya yang mesti menyisipkan peraturan sebelum susun atur dibaca.
⤢useDebugValue	Menunjukkan label tersuai bagi state dalaman hook dalam React DevTools.	Melabel apa yang disimpan oleh custom hook semasa nyahpepijat.
⤢Custom hooks (use*)	Hook buatan sendiri yang menggabungkan yang terbina dalam untuk berkongsi logik.	Tingkah laku berkeadaan yang boleh diguna semula seperti useFetch atau useMediaQuery.