Reactjs Usesyncexternalstore Subscribe Getsnapshot External Store

React.js1 September 20262 menit baca

Reactjs Usesyncexternalstore Subscribe Getsnapshot External Store

Definisi

useSyncExternalStore adalah hook bawaan untuk membaca state dari store eksternal (bukan React state) sambil tetap aman terhadap concurrent rendering dan tearing. Ia mengambil subscribe (daftarkan listener) dan getSnapshot (baca nilai saat ini), serta opsional getServerSnapshot untuk SSR.

Kapan dipakai

Pakai saat state disimpan di luar React: store Redux/Zustand tingkat rendah, WebSocket, localStorage, media query, browser API. Jangan pakai untuk state lokal biasa (useState/useReducer cukup).

Cara kerja

Store minimal

let state = { count: 0 };
const listeners = new Set();
 
function emit() { listeners.forEach

Selesai membaca dokumentasi ini?

Kembali ke rujukan utama React.js untuk melanjutkan topik lainnya.

Kembali ke Kategori

jsx

import { useSyncExternalStore } from 'react';
 
function Counter() {
    const snap = useSyncExternalStore(store.subscribe, store.getSnapshot);
    return <button onClick={store.inc}>{snap.count}</button>;
}

Reactjs Usesyncexternalstore Subscribe Getsnapshot External Store | Rujukan Pemrograman | Mahir.dev Academy

Reactjs Usesyncexternalstore Subscribe Getsnapshot External Store

Reactjs Usesyncexternalstore Subscribe Getsnapshot External Store

Definisi

Kapan dipakai

Cara kerja

Store minimal

Selesai membaca dokumentasi ini?

Baca di komponen

SSR aman

Struktur alur

Contoh dengan selector

Catatan implementasi

Kesalahan umum

Referensi terkait