[React Hook] useState

Anehnya, lingkungan React sangat menyukai hal-hal yang diawali dengan 'use'

Seperti useServer, useCallback, useState, useMemo, dan lain sebagainya.

Custom hook juga semuanya diawali dengan 'use'

Darimana ini semua bermula?

useState adalah hook yang terkenal.

Menyimpan nilai state, dan memicu re-render ketika nilainya berubah. Sangat sederhana.

Contoh yang sudah familiar bagi semua orang.

Jika nilai state berubah, re-render terjadi. Tapi, scope re-render itu seperti apa?

Hanya tag p? Atau sampai tag button?

Jawabannya adalah seluruh komponen tempat useState dipanggil.

ExampleComponent dire-render, tetapi

Virtual DOM digunakan untuk membandingkan nilai dan hanya memodifikasi DOM di bagian yang berbeda.

useState dipanggil setiap kali re-render, bagaimana nilai state dapat dipertahankan?

Jawabannya terletak pada struktur useState.

Kode di atas adalah kode useState asli React.

Dispatcher diambil dari objek global dan useState dipanggil.

Dari sini, strukturnya masih belum bisa dipahami.

Jika kita telusuri lebih dalam, kita akan menemukan kode berikut.

Hook diambil dan fungsi set secara langsung dikaitkan dengan antrean (queue) yang ada di hook menggunakan bind.

(Bind digunakan untuk mengikat this pada fungsi yang sudah ada, dan argumen lainnya digunakan sebagai argumen fungsi tersebut. Kemudian, mengembalikan fungsi baru dengan this yang sudah diikat.)

Dari sini, masih sulit untuk memahami alasannya.

Mari kita telusuri lebih dalam lagi.

Kita dapat melihat bahwa nilai init ditetapkan setiap kali. Hal ini tidak menjelaskan bagaimana state dipertahankan.

Mari kita telusuri lebih dalam lagi. Hook terlihat mencurigakan.

currentlyRenderingFiber dan workInProgressHook adalah variabel global.

Ini adalah implementasi linked list dengan memanfaatkan penugasan dari kanan ke kiri.

Jadi, jika kita melihat hook, strukturnya diperkirakan seperti ini.

Nilai terus ditambahkan di bagian awal.

Namun, penjelasannya masih belum lengkap. Setelah melihat implementasi useState yang lain,

Ternyata, tidak semua implementasi memanggil mountState. Ketika terjadi re-render, updateState dan rerenderState dipanggil.

Jadi, strukturnya seperti yang dijelaskan di atas, dan fungsi yang berbeda dipanggil sesuai dengan event yang terjadi.

Jika Anda ingin melihat kode tersebut secara langsung, Anda dapat merujuk ke react/packages/react-reconciler/src/ReactFiberHooks.js.