Membangun Penyimpanan Khusus dengan useSyncExternalStore

Penyimpanan khusus memerlukan tiga hal: sejumlah keadaan, metode berlangganan untuk mendaftarkan pendengar, dan metode getSnapshot untuk membaca keadaan saat ini. Itulah seluruh kontrak yang diharapkan useSyncExternalStore.

Menjaga penyimpanan tetap sekecil ini membuatnya tidak bergantung pada kerangka kerja, sehingga penyimpanan yang sama dapat digunakan di dalam maupun di luar React.

Pabrik createStore menerima nilai awal dan mengembalikan objek dengan getSnapshot, fungsi berlangganan, serta metode pembaruan. Di dalamnya, pabrik ini menyimpan keadaan saat ini dan sekumpulan fungsi panggil balik pendengar.

Pola pabrik ini memungkinkan Anda membuat beberapa penyimpanan independen menggunakan satu fungsi yang dapat digunakan kembali.

Ketika pembaruan mengubah keadaan, fungsi tersebut menetapkan nilai baru lalu memanggil setiap pendengar yang terdaftar. Pendengar tersebut adalah fungsi panggil balik yang diberikan React melalui fungsi berlangganan.

Memanggilnya memberi tahu React bahwa penyimpanan berubah, sehingga React membaca ulang getSnapshot dan merender ulang komponen apa pun yang membaca dari penyimpanan tersebut.

Komponen membaca dari penyimpanan dengan memanggil useSyncExternalStore menggunakan metode berlangganan dan getSnapshot milik penyimpanan. Hook ini mengembalikan nilai saat ini dan merender ulang komponen ketika nilainya berubah.

Anda dapat membungkusnya dalam hook khusus seperti useStore agar komponen cukup memanggil satu fungsi, tanpa merangkai sendiri argumen hook setiap kali.

Karena penyimpanan merupakan objek tingkat modul, komponen apa pun yang mengimpornya akan berbagi keadaan yang sama, tanpa memerlukan Penyedia Konteks. Tidak ada hierarki yang perlu dibungkus dan tidak ada penerusan properti berantai.

Inilah daya tarik utama penyimpanan eksternal: keadaan global bersama dengan model impor-dan-pakai yang sederhana, bukan hierarki Penyedia.

Anda dapat membuat beberapa penyimpanan kecil yang masing-masing memiliki satu bagian keadaan, alih-alih satu penyimpanan monolitik. Komponen hanya berlangganan ke bagian yang diperlukan.

Hal ini menjaga tanggung jawab tetap terpisah dan membatasi perenderan ulang, karena perubahan pada satu bagian tidak pernah mengganggu komponen yang membaca bagian lain.

Zustand, pustaka keadaan minimal yang populer, dibangun tepat berdasarkan pola ini dan menggunakan useSyncExternalStore secara internal sejak versi 4. API-nya yang kecil pada dasarnya merupakan createStore yang telah dipoles dengan lapisan pemilih.

Melihat hubungan ini menghilangkan kesan misterius dari pustaka semacam itu: semuanya adalah pembungkus tipis dan ergonomis di atas primitif yang sama, yang dapat Anda bangun sendiri.

Dengan meneruskan pemilih ke getSnapshot yang hanya mengembalikan bagian status yang digunakan sebuah komponen, Anda memastikan komponen hanya dirender ulang ketika bagian tersebut berubah.

Ini memerlukan hasil pemilih yang stabil, jadi memoisasikan nilai turunan untuk menghindari loop tak terbatas akibat referensi baru, sekaligus membatasi pembaruan pada bagian yang relevan.

Untuk menelusuri kesalahan, Anda dapat memasang label pada penyimpanan dan mencatat pembaruan, atau mengintegrasikannya dengan alat pengembang peramban agar dapat melacak penyimpanan mana yang berubah dan kapan.

Bahkan catatan sederhana di konsol di dalam fungsi pembaruan, yang dikendalikan oleh penanda pengembangan, membantu Anda memahami alur status saat membangun penyimpanan.

Karena penyimpanan ini adalah JavaScript murni, Anda dapat menguji logikanya secara langsung: panggil fungsi pembaruan dan pastikan getSnapshot mengembalikan nilai baru, tanpa merender apa pun.

Anda juga dapat mengujinya di dalam React dengan merender komponen yang membaca data darinya dan memastikan perenderan ulang terjadi setelah pembaruan, sehingga penyimpanan dan integrasinya tercakup.

Penyimpanan kustom memerlukan status, langganan, dan getSnapshot. Pabrik createStore ditambah pembaruan yang memberi tahu pendengar menghasilkan status global bersama tanpa Penyedia, karena impor modul berbagi satu instans.

Gunakan beberapa penyimpanan bagian dan pemilih untuk membatasi perenderan ulang, dengan tetap mengingat pentingnya referensi yang stabil. Zustand v4+ dibangun persis dengan pola ini, dan penyimpanan JavaScript murni mudah diuji di dalam maupun di luar React.