React Hook Bawaan
Hook memungkinkan Anda menggunakan fitur React dari dalam komponen Anda. Anda dapat menggunakan Hook bawaan atau mengkombinasikan mereka untuk membuat hook Anda sendiri. Halaman ini mencantumkan daftar semua Hook bawaan yang tersedia di React.
Hook State
State memungkinkan sebuah komponen “mengingat” informasi seperti masukan pengguna. Sebagai contoh, sebuah komponen formulir dapat menggunakan state untuk menyimpan nilai masukan, sementara sebuah komponen galeri gambar dapat menggunakan state untuk menyimpan indeks gambar yang terpilih.
Untuk menambahkan state ke sebuah komponen, gunakan salah satu Hooks dibawah ini:
useState
mendeklarasikan sebuah variabel state yang dapat Anda perbarui secara langsung.useReducer
mendeklarasikan sebuah variabel state dengan logika pembaruan yang tertulis di dalam sebuah fungsi reducer.
function ImageGallery() {
const [index, setIndex] = useState(0);
// ...
Hook Context
Context memungkinkan sebuah komponen menerima informasi dari induk yang jauh tanpa mengopernya sebagai props. Sebagai contoh, komponen tingkat teratas aplikasi Anda dapat meneruskan tema antarmuka pengguna (UI) saat ini ke semua komponen di bawahnya, seberapa pun dalamnya.
useContext
membaca dan berlangganan ke sebuah context.
function Button() {
const theme = useContext(ThemeContext);
// ...
Hook Ref
Refs memungkinkan sebuah komponen menyimpan beberapa informasi yang tidak digunakan untuk pe-render-an seperti simpul (node) DOM atau ID timeout. Tidak seperti state, memperbarui sebuah ref tidak me-render ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. Ref berguna ketika Anda perlu untuk bekerja dengan sistem-sistem non-React, seperti API-API bawaan dari peramban.
useRef
mendeklarasikan ref. Anda dapat menyimpan nilai apa pun di dalamnya, tapi ref seringkali digunakan untuk menyimpan simpul DOM.useImperativeHandle
memungkinkan Anda menyesuaikan ref yang terekspos oleh komponen Anda. Ini jarang sekali digunakan.
function Form() {
const inputRef = useRef(null);
// ...
Hook Efek
Efek memungkinkan sebuah komponen terhubung dan menyinkronkan dengan sistem eksternal. Termasuk di dalamnya yakni berurusan dengan jaringan, DOM peramban, animasi, widget yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya.
useEffect
menghubungkan sebuah komponen ke sebuah sistem eksternal.
function ChatRoom({ roomId }) {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
// ...
Efek adalah “jalan keluar” dari paradigma React. Jangan gunakan Efek untuk mengatur aliran data aplikasi Anda. Jika Anda tidak berinteraksi dengan sistem eksternal, kemungkinan besar Anda tidak memerlukan Efek.
Terdapat dua variasi dari useEffect
yang jarang digunakan dengan perbedaan pada waktu eksekusinya
useLayoutEffect
dipanggil sebelum peramban melukis ulang (repaint) layar. Anda dapat menggunakannya untuk mengukur tata letak (layout) pada tahap ini.useInsertionEffect
dipanggil sebelum React melakukan perubahan ke DOM. Pustaka-pustaka (libraries) lainnya dapat memasukkan CSS dinamik di sini.
Hook Kinerja
Cara yang umum untuk mengoptimalkan kinerja pe-render-an ulang adalah melewatkan pekerjaan yang tidak perlu. Sebagai contoh, Anda dapat memberi tahu React untuk menggunakan kembali perhitungan yang sudah ada di dalam cache atau untuk melewatkan render ulang jika data tersebut tidak berubah sejak render sebelumnya.
Untuk melewatkan perhitungan dan pe-render-an ulang yang tidak perlu, gunakan salah satu dari Hook-hook ini:
useMemo
memungkinkan Anda menyimpan hasil perhitungan yang berat di cache.useCallback
memungkinkan Anda menyimpan definisi fungsi di cache sebelum melewatkannya ke komponen yang hendak dioptimasi.
function TodoList({ todos, tab, theme }) {
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
// ...
}
Terkadang, Anda tidak dapat melewatkan pe-render-an ulang karena layar memang benar-benar memerlukan pembaruan. Di dalam kasus itu, Anda dapat meningkatkan kinerja dengan memisahkan pembaruan penghalang (blocking updates) yang harus sinkron (seperti mengetik masukan) dari pembaruan yang bukan penghalang (non-blocking updates) yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan).
Untuk memprioritaskan pe-render-an, gunakan salah satu dari Hook-hook ini:
useTransition
memungkinkan Anda menandai transisi state sebagai bukan penghalang dan mengizinkan pembaruan lain untuk menghentikannya.useDeferredValue
memungkinkan Anda menangguhkan pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu.
Hook lainya
Ini adalah Hook yang sebagian besar berguna untuk penulis pustaka dan tidak umum digunakan di dalam kode aplikasi.
useDebugValue
memungkinkan Anda memodifikasi tampilan label React DevTools untuk Hook kustom Anda.useId
memungkinkan komponen mengasosiasikan ID unik dengan dirinya sendiri. Biasanya digunakan dengan API aksesibilitas.useSyncExternalStore
memungkinkan komponen berlangganan ke store eksternal.
useActionState
memungkinkan Anda mengelola state dari action.
Hook Anda sendiri
Anda juga dapat mendefinisikan Hook kustom Anda sendiri sebagai fungsi JavaScript.