API dan Parameter useSyncExternalStore

useSyncExternalStore menerima hingga tiga argumen: fungsi berlangganan, getSnapshot, dan getServerSnapshot opsional. Ketiganya memberi tahu React cara mendengarkan perubahan dan cara membaca nilai saat ini.

Memahami setiap argumen sangat penting, karena kesalahan kecil di dalamnya merupakan sumber bug yang paling umum saat menggunakan hook ini.

Fungsi berlangganan menerima fungsi panggil balik dari React dan harus mendaftarkannya ke penyimpanan agar fungsi panggil balik tersebut berjalan setiap kali penyimpanan berubah. Fungsi ini harus mengembalikan fungsi berhenti berlangganan yang dipanggil React saat pembersihan.

React menggunakan mekanisme ini untuk mengetahui kapan cuplikan perlu dibaca ulang, sehingga fungsi berlangganan sepenuhnya berkaitan dengan menghubungkan dan melepaskan pemberitahuan perubahan.

getSnapshot mengembalikan nilai penyimpanan saat ini. React memanggilnya selama perenderan untuk membaca keadaan, lalu memanggilnya lagi setelah pemberitahuan untuk mendeteksi apakah nilainya berubah.

Yang sangat penting, fungsi ini harus mengembalikan hasil yang stabil secara referensi ketika data yang mendasarinya tidak berubah, yaitu mengembalikan referensi yang sama, bukan objek baru setiap kali.

getServerSnapshot yang opsional menyediakan nilai yang digunakan selama perenderan di sisi server dan tahap hidrasi awal. Fungsi ini diperlukan karena getSnapshot yang hanya tersedia di peramban mungkin bergantung pada API yang tidak ada di server.

Menyediakannya mencegah ketidaksesuaian hidrasi dengan memberikan nilai yang masuk akal untuk dirender oleh server dan sesuai dengan hasil awal yang akan dibuat klien.

Hook ini mengembalikan nilai cuplikan saat ini, yang Anda gunakan langsung di dalam komponen seperti bagian keadaan lainnya. Ketika penyimpanan berubah, React merender ulang komponen dan hook ini mengembalikan cuplikan yang diperbarui.

Dari sudut pandang komponen, hal ini terasa seperti membaca keadaan reaktif, meskipun sumber kebenarannya sepenuhnya berada di luar React.

getSnapshot harus berjalan secara sinkron dan mengembalikan nilai yang diturunkan murni dari keadaan penyimpanan saat ini. Fungsi ini tidak boleh melakukan pekerjaan asinkron atau menghasilkan hasil yang berbeda untuk data dasar yang sama.

React mengandalkan pemanggilan fungsi ini berulang kali dan membandingkan hasilnya, sehingga nondeterminisme atau efek samping apa pun di dalamnya dapat menyebabkan perilaku yang keliru.

Penyimpanan yang menyimpan keadaan tak berubah membuat getSnapshot mudah digunakan, karena referensi objek keadaan saat ini hanya berubah ketika data berubah. Mengembalikan referensi tersebut memberikan perbandingan yang stabil secara otomatis.

Inilah alasan pola pembaruan tak berubah sangat cocok dipadukan dengan hook ini: data yang sama berarti referensi yang sama, dan React melewati perenderan ulang yang tidak diperlukan.

Kesalahan yang sering terjadi adalah mengembalikan objek atau larik yang benar-benar baru dari getSnapshot pada setiap pemanggilan, misalnya dengan melakukan pemetaan atau penyaringan di dalamnya. React melihat referensi baru setiap kali dan mengira nilainya berubah.

Hal itu memicu perenderan ulang tanpa henti atau peringatan. Perbaikannya adalah menyimpan nilai turunan dalam tembolok dan mengembalikan referensi yang sama sampai data sumber benar-benar berubah.

Untuk menghindari perulangan tersebut, hitung data turunan di luar getSnapshot atau lakukan memorisasi agar fungsi mengembalikan referensi yang disimpan dalam tembolok. Pola bergaya pemilih yang digunakan banyak pustaka ada tepat untuk mengelola kestabilan ini.

Aturan utamanya adalah dua pemanggilan getSnapshot dengan data penyimpanan yang tidak berubah harus mengembalikan referensi yang benar-benar sama.

Dalam praktiknya, Anda menulis fungsi berlangganan yang menambahkan dan menghapus pendengar, getSnapshot yang membaca nilai saat ini secara stabil, serta, untuk SSR, getServerSnapshot yang mengembalikan nilai yang aman untuk server.

Dengan ketiga fungsi tersebut ditulis dengan benar, hook ini memberikan pembacaan penyimpanan eksternal yang konsisten dan aman dalam perenderan konkurensi dengan kerumitan tambahan yang minimal.

Identifikasi peran getSnapshot.

Hook ini menerima fungsi berlangganan, getSnapshot, dan getServerSnapshot secara opsional. Fungsi berlangganan menghubungkan pendengar dan mengembalikan fungsi berhenti berlangganan; getSnapshot membaca nilai saat ini secara sinkron dan harus stabil secara referensi; getServerSnapshot menyediakan nilai yang aman untuk SSR.

Kesalahan klasiknya adalah mengembalikan objek baru pada setiap pemanggilan, yang menyebabkan perulangan tak terbatas. Simpan nilai turunan dalam tembolok agar data yang tidak berubah menghasilkan referensi yang sama.