Masalah Langganan Penyimpanan Eksternal

Penyimpanan eksternal adalah sumber status apa pun yang berada di luar pohon React, seperti penyimpanan Redux, API peramban seperti matchMedia, atau objek sederhana tingkat modul dengan mekanisme langganannya sendiri.

React tidak memiliki status ini, sehingga React harus berlangganan perubahan dan membaca cuplikan untuk menjaga komponen tetap sinkron dengan apa pun yang sedang disimpan oleh penyimpanan tersebut.

Pendekatan umum membaca nilai penyimpanan ke dalam useState, lalu menggunakan useEffect untuk berlangganan dan memanggil setState setiap kali penyimpanan berubah. Sekilas, pendekatan ini tampaknya menjaga komponen tetap mutakhir.

Pendekatan ini bekerja untuk perenderan sinkron sederhana, tetapi memiliki kelemahan halus yang terlihat saat React merender secara serentak dan dapat menjeda atau memulai kembali pekerjaan di tengah proses.

Tampilan terbelah terjadi ketika berbagai bagian antarmuka menampilkan nilai berbeda dari penyimpanan yang sama selama satu kali proses perenderan. Perenderan serentak dapat menyela dan melanjutkan pekerjaan, sementara penyimpanan mungkin berubah di antaranya.

Hasilnya adalah layar yang tidak konsisten: satu komponen menampilkan nilai lama dan komponen lain menampilkan nilai baru. Ketidakkonsistenan ini pada dasarnya mustahil terjadi sebelum hadirnya fitur-fitur serentak.

Bayangkan banyak komponen membaca penyimpanan tema saat React merender secara serentak. Jika pengguna mengaktifkan mode gelap di tengah proses, komponen yang dirender sebelum perubahan akan menampilkan tema terang, sedangkan komponen setelahnya menampilkan tema gelap.

Anda akan mendapatkan layar yang setengah terang dan setengah gelap selama satu bingkai karena nilai penyimpanan berubah ketika perenderan sedang berlangsung, tanpa diperlakukan React sebagai operasi atomik.

Efek berjalan setelah hasil perenderan diterapkan, sehingga langganan berbasis useEffect tidak dapat menjamin bahwa nilai yang dibaca selama perenderan sama dengan nilai penyimpanan pada saat penerapan. Langganan tersebut berjalan terlalu lambat untuk mencegah tampilan yang tidak konsisten.

Saat efek kembali berlangganan dan memperbarui status, bingkai yang tidak konsisten mungkin sudah terlanjur ditampilkan kepada pengguna.

API eksperimental terdahulu bernama useMutableSource berusaha menyelesaikan pembacaan eksternal yang aman untuk perenderan serentak, tetapi API-nya terbukti sulit digunakan dengan benar dan tidak pernah dirilis sebagai fitur stabil.

Tim React menggantinya dengan primitif yang lebih sederhana dan mudah digunakan, yang memberikan jaminan konsistensi sama tanpa kerumitan yang menyulitkan.

useSyncExternalStore adalah pengait resmi untuk berlangganan penyimpanan eksternal dengan cara yang aman untuk perenderan serentak. Pengait ini berkoordinasi dengan React agar pembacaan tetap konsisten selama perenderan dan komponen tidak pernah mengalami tampilan terbelah.

Pengait ini menjadi primitif yang direkomendasikan bagi pengembang pustaka yang perlu menjembatani status eksternal ke React secara andal dalam perenderan serentak.

Pustaka status yang berlangganan penyimpanan eksternal terdampak langsung, termasuk Redux, MobX, dan Valtio. Masing-masing perlu mengadopsi primitif baru tersebut agar tetap aman setelah fitur-fitur serentak dirilis.

Itulah sebabnya penghubung React untuk pustaka-pustaka tersebut diperbarui agar secara internal memanggil useSyncExternalStore, bukan mengandalkan pola useState ditambah useEffect yang lebih lama.

Hook ini menjamin bahwa setiap komponen yang membaca penyimpanan selama perenderan melihat cuplikan yang sama, serta memaksa perenderan ulang secara sinkron jika penyimpanan berubah dengan cara yang jika dibiarkan akan menyebabkan hasil pembacaan menjadi tidak konsisten.

Perpaduan cuplikan yang konsisten dan keamanan konkurensi ini merupakan nilai utama yang diberikan hook ini dibandingkan langganan yang dibuat secara manual.

Dengan menggunakan useSyncExternalStore, langganan Anda tetap benar seiring React mengembangkan model perenderannya. Anda menggunakan jaminan dari kerangka kerja, alih-alih menerapkannya kembali secara kurang sempurna.

Hal ini menjadikannya cara yang tahan lama dan direkomendasikan untuk menghubungkan sumber kebenaran eksternal apa pun ke komponen React.

Pastikan Anda memahami arti ketidakkonsistenan pembacaan dalam perenderan konkurensi.

Penyimpanan eksternal berada di luar React, dan langganan naif menggunakan useState serta useEffect tidak dapat mencegah ketidakkonsistenan pembacaan ketika perenderan berlangsung secara konkurensi. Efek berjalan terlalu lambat untuk menjaga agar pembacaan tetap konsisten dalam satu perenderan.

useSyncExternalStore menggantikan useMutableSource yang ditinggalkan dan memberikan cuplikan yang konsisten dengan keamanan konkurensi. Pustaka seperti Redux, MobX, dan Valtio mengadopsinya sebagai primitif yang siap menghadapi masa depan untuk langganan penyimpanan.