Berlangganan API Peramban

Kueri media peramban merupakan penyimpanan eksternal yang sempurna. Anda dapat berlangganan ke kueri matchMedia untuk mode gelap atau titik henti, lalu merender ulang setiap kali status kecocokannya berubah.

Fungsi berlangganan menambahkan pendengar perubahan ke MediaQueryList, sedangkan getSnapshot mengembalikan nilai benar-salah kecocokannya saat ini, sehingga Anda dapat mengakses kondisi responsif secara reaktif.

Membungkus logika tersebut ke dalam hook useMediaQuery memungkinkan komponen menanyakan apakah suatu kueri cocok hanya dengan satu pemanggilan. Hook ini membangun fungsi berlangganan dan getSnapshot yang stabil berdasarkan teks kueri tertentu.

Hasilnya adalah primitif yang bersih dan dapat digunakan kembali untuk perilaku responsif, yang tetap konsisten selama perenderan konkurensi berkat useSyncExternalStore.

Peramban menyediakan peristiwa daring dan luring serta navigator.onLine. Dengan berlangganan ke peristiwa tersebut dan membaca propertinya, Anda dapat memperoleh status konektivitas langsung di dalam React.

getSnapshot mengembalikan navigator.onLine, sedangkan fungsi berlangganan memasang pendengar untuk peristiwa daring dan luring agar komponen diperbarui ketika konektivitas berubah.

Menggabungkan logika tersebut ke dalam hook useOnlineStatus memungkinkan komponen apa pun menampilkan spanduk luring atau menonaktifkan tindakan ketika jaringan terputus. Dokumentasi resmi React menggunakan contoh yang persis ini untuk menunjukkan hook tersebut.

Ini merupakan kasus kecil tetapi jelas, ketika sinyal eksternal dari peramban dapat dipetakan dengan rapi menjadi bagian dari keadaan reaktif.

Anda dapat berlangganan ke perubahan navigasi dengan mendengarkan peristiwa perubahan riwayat dan membaca window.location di dalam getSnapshot. Hal ini menjadi dasar perute khusus sederhana yang dibangun menggunakan API Riwayat.

Karena pushState tidak memancarkan peristiwa perubahan riwayat, perute khusus sering mengirimkan peristiwanya sendiri agar cuplikan ikut diperbarui saat navigasi terprogram.

Peristiwa penyimpanan dipicu di tab lain ketika localStorage berubah, sehingga localStorage dapat menjadi penyimpanan eksternal yang dapat Anda langgani. getSnapshot membaca nilai saat ini, sedangkan fungsi berlangganan mendengarkan peristiwa penyimpanan.

Hal ini memungkinkan sinkronisasi lintas tab, sehingga pembaruan nilai di satu tab secara reaktif memperbarui komponen di tab lain.

Peristiwa deviceOrientation melaporkan kemiringan fisik perangkat. Dengan berlangganan ke peristiwa tersebut dan membaca sudut terbaru di dalam getSnapshot, data gerakan dapat diubah menjadi keadaan reaktif.

Hal ini berguna untuk efek paralaks atau visualisasi interaktif yang merespons cara ponsel dipegang.

IntersectionObserver memberi tahu Anda ketika suatu elemen memasuki atau meninggalkan area pandang. Anda dapat membungkusnya sehingga fungsi berlangganan membuat pengamat dan getSnapshot mengembalikan nilai isIntersecting terbaru.

Hasilnya adalah penanda isVisible yang reaktif untuk pemuatan gambar tertunda, pemicuan animasi, atau penerapan penanda gulir tak terbatas.

ResizeObserver melaporkan perubahan ukuran elemen. Dengan membungkusnya, Anda dapat membuat fungsi berlangganan mengamati suatu elemen dan getSnapshot mengembalikan dimensinya saat ini, sehingga komponen merespons perubahan tata letak secara tepat.

Cara ini lebih efisien dan akurat daripada mendengarkan perubahan ukuran jendela ketika yang Anda perlukan adalah ukuran elemen tertentu, bukan seluruh area pandang.

Anda dapat menggabungkan peristiwa perubahan ukuran dengan hook untuk membuat useWindowSize yang mengembalikan lebar dan tinggi saat ini. Fungsi berlangganan memasang pendengar perubahan ukuran, sedangkan getSnapshot membaca dimensi jendela.

Ingatlah untuk mengembalikan cuplikan yang stabil dengan menyimpan objek ukuran dalam tembolok agar dimensi yang tidak berubah tidak menyebabkan perenderan ulang, sehingga penggabungan tetap efisien.

Telusuri cara hook useMediaQuery menggunakan hook penyimpanan.

Banyak API peramban merupakan penyimpanan eksternal yang dapat dihubungkan melalui useSyncExternalStore: matchMedia untuk titik henti, navigator.onLine untuk konektivitas, lokasi dan penyimpanan untuk navigasi serta sinkronisasi lintas tab, ditambah pengamat orientasi, persilangan, dan perubahan ukuran.

Semuanya mengikuti struktur yang sama, yaitu fungsi berlangganan yang memasang dan melepaskan pendengar serta getSnapshot yang stabil. Gabungkan semuanya menjadi hook seperti useMediaQuery, useOnlineStatus, dan useWindowSize.