API dan Parameter useSyncExternalStore

useSyncExternalStore menerima sehingga tiga argumen: fungsi langganan, getSnapshot dan getServerSnapshot pilihan. Bersama-sama, argumen ini memberitahu React cara mendengar perubahan dan cara membaca nilai semasa.

Memahami setiap argumen adalah penting kerana kesilapan kecil dalam argumen tersebut merupakan punca pepijat yang paling biasa apabila cangkuk ini digunakan.

Fungsi langganan menerima panggilan balik daripada React dan mesti mendaftarkannya dengan stor supaya panggilan balik itu berjalan setiap kali stor berubah. Fungsi ini mesti memulangkan fungsi berhenti melanggan yang dipanggil React semasa pembersihan.

React menggunakan mekanisme ini untuk mengetahui masa petikan perlu dibaca semula, jadi fungsi langganan semata-mata bertujuan menyambungkan dan menamatkan pemberitahuan perubahan.

getSnapshot memulangkan nilai semasa stor. React memanggilnya semasa pemaparan untuk membaca keadaan dan sekali lagi selepas pemberitahuan bagi mengesan sama ada nilai itu berubah.

Yang penting, fungsi ini mesti memulangkan hasil yang stabil dari segi rujukan apabila data asas tidak berubah, iaitu memulangkan rujukan yang sama dan bukannya objek baharu setiap kali.

getServerSnapshot pilihan menyediakan nilai yang digunakan semasa pemaparan sebelah pelayan dan laluan hidrasi awal. Fungsi ini wujud kerana getSnapshot yang hanya digunakan dalam pelayar mungkin bergantung pada API yang tidak wujud pada pelayan.

Menyediakannya menghalang ketidakpadanan hidrasi dengan memberikan pelayan nilai munasabah untuk dipaparkan, yang sepadan dengan hasil awal pada klien.

Cangkuk ini memulangkan nilai petikan semasa, yang anda gunakan terus dalam komponen seperti mana-mana bahagian keadaan yang lain. Apabila stor berubah, React memaparkan semula komponen dan cangkuk ini memulangkan petikan yang dikemas kini.

Dari sudut pandangan komponen, perkara ini terasa seperti membaca keadaan reaktif, walaupun sumber kebenarannya berada sepenuhnya di luar React.

getSnapshot mesti berjalan secara segerak dan memulangkan nilai yang diperoleh semata-mata daripada keadaan stor semasa. Fungsi ini tidak sepatutnya melakukan kerja tak segerak atau menghasilkan keputusan yang berbeza untuk data asas yang sama.

React bergantung pada pemanggilannya berulang kali dan perbandingan hasil, jadi sebarang hasil yang tidak tentu atau kesan sampingan di dalamnya boleh menyebabkan kelakuan yang salah.

Stor yang menyimpan keadaan tidak boleh diubah menjadikan getSnapshot mudah, kerana rujukan objek keadaan semasa hanya berubah apabila data berubah. Memulangkan rujukan itu memberikan perbandingan yang stabil secara automatik.

Inilah sebabnya corak kemas kini tidak boleh diubah sangat sesuai digandingkan dengan cangkuk ini: data yang sama bermaksud rujukan yang sama, lalu React melangkau pemaparan semula yang tidak diperlukan.

Kesilapan yang kerap berlaku ialah memulangkan objek atau tatasusunan yang benar-benar baharu daripada getSnapshot pada setiap panggilan, contohnya dengan melakukan pemetaan atau penapisan di dalamnya. React melihat rujukan baharu setiap kali lalu menganggap nilai itu berubah.

Hal ini mencetuskan pemaparan semula tanpa penghujung atau amaran. Penyelesaiannya ialah menyimpan nilai terbitan dalam ingatan sementara dan memulangkan rujukan yang sama sehingga data sumber benar-benar berubah.

Untuk mengelakkan gelung itu, kira data terbitan di luar getSnapshot atau simpan hasilnya dalam ingatan sementara supaya fungsi tersebut memulangkan rujukan yang disimpan. Corak seperti pemilih yang digunakan oleh banyak perpustakaan wujud tepat untuk mengurus kestabilan ini.

Peraturan panduan ialah dua panggilan kepada getSnapshot dengan data stor yang tidak berubah mesti memulangkan rujukan yang sama tepat.

Dalam amalan, anda menulis fungsi langganan yang menambah dan mengalih keluar pendengar, getSnapshot yang membaca nilai semasa yang stabil dan, untuk SSR, getServerSnapshot yang memulangkan nilai selamat untuk pelayan.

Dengan ketiga-tiganya dilaksanakan dengan betul, cangkuk ini menyediakan bacaan yang konsisten dan selamat untuk pemaparan serentak daripada stor luaran anda tanpa banyak kod sokongan.

Cangkuk ini menerima fungsi langganan, getSnapshot dan, secara pilihan, getServerSnapshot. Fungsi langganan menyambungkan pendengar dan memulangkan fungsi berhenti melanggan; getSnapshot membaca nilai semasa secara segerak dan mesti stabil dari segi rujukan; getServerSnapshot menyediakan nilai yang selamat untuk SSR.

Perangkap klasiknya ialah memulangkan objek baharu pada setiap panggilan, yang menyebabkan gelung tanpa penghujung. Simpan nilai terbitan supaya data yang tidak berubah menghasilkan rujukan yang sama.