React Hook Bawaan

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 Resource

Resource dapat diakses sebuah komponen tanpa membuatnya menjadi bagian dari state. Misalnya, sebuah komponen dapat membaca pesan dari sebuah Promise atau membaca informasi style dari sebuah context.

To read a value from a resource, use this Hook:

• use memungkinkan Anda membaca nilai dari sebuah resource seperti Promise atau context.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

Hook lainnya

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.

Hook Anda sendiri

Anda juga dapat mendefinisikan Hook kustom Anda sendiri sebagai fungsi JavaScript.