React useSyncExternalStore: Subscribe ke Data di Luar React

useSyncExternalStore membuat komponen berlangganan ke data yang berada di luar React dan merendernya lagi setiap kali data itu berubah. Kamu memberinya dua fungsi: subscribe, yang memberi tahu React cara mendengarkan perubahan, dan getSnapshot, yang mengembalikan nilai saat ini.

import { useSyncExternalStore } from 'react';

// A tiny store that lives outside React
let count = 0;
const listeners = new Set();

const counterStore = {
    increment() {
        count += 1;
        listeners.forEach((listener) => listener());
    },
    subscribe(listener) {
        listeners.add(listener);
        return () => listeners.delete(listener);
    },
    getSnapshot() {
        return count;
    },
};

function Display({ name }) {
    const value = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);
    console.log(name, 'rendered with', value);
    return <p>{name} sees {value}</p>;
}

export default function App() {
    return (
        <div>
            <Display name="Header" />
            <Display name="Footer" />
            <button onClick={counterStore.increment}>Increment the store</button>
        </div>
    );
}

Kedua komponen Display tidak berbagi props maupun context, tapi keduanya diperbarui bersama, karena keduanya berlangganan ke store yang sama. Tombolnya memanggil fungsi biasa, bukan setter React. Tambahkan <Display name="Sidebar" /> ketiga dan komponen itu ikut bergabung tanpa perubahan lain.

Sintaksnya

const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);

• subscribe(callback) mulai mendengarkan, memanggil callback setiap kali datanya mungkin berubah, dan mengembalikan fungsi unsubscribe. React memanggilnya setelah komponen di-mount dan memanggil fungsi yang dikembalikan saat unmount.
• getSnapshot() mengembalikan nilai saat ini. React memanggilnya di setiap render dan setelah setiap notifikasi, lalu membandingkan hasilnya dengan yang terakhir memakai Object.is. Nilainya sama, tidak ada render.
• getServerSnapshot() (opsional) mengembalikan nilai yang dipakai di server dan saat hidrasi.

Definisikan subscribe di luar komponen, atau jaga agar tetap stabil dengan useCallback. Kalau kamu memberikan fungsi subscribe baru di setiap render, React berhenti berlangganan lalu berlangganan lagi setiap kali.

API browser sebagai store

Apa pun yang punya nilai saat ini dan memicu event saat nilai itu berubah cocok dengan bentuk ini. navigator.onLine dengan event online dan offline adalah contoh klasiknya.

import { useSyncExternalStore } from 'react';

function subscribe(callback) {
    window.addEventListener('online', callback);
    window.addEventListener('offline', callback);
    console.log('subscribed to online/offline');
    return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
    };
}

function useOnlineStatus() {
    return useSyncExternalStore(
        subscribe,
        () => navigator.onLine,
        () => true
    );
}

export default function App() {
    const online = useOnlineStatus();
    return (
        <p style={{ color: online ? '#1a7f37' : '#c0392b' }}>
            {online ? 'You are online' : 'You are offline: changes will sync later'}
        </p>
    );
}

Matikan jaringanmu (atau pilih Offline di developer tools browser-mu) dan teksnya berubah tanpa memuat ulang. Argumen ketiga menyatakan "anggap online" saat merender di server, tempat tidak ada navigator. Membungkus pemanggilan hook itu di useOnlineStatus menjadikannya custom hook yang bisa dipakai komponen mana pun.

Lebar window bekerja dengan cara yang sama:

import { useSyncExternalStore, useState } from 'react';

function subscribe(callback) {
    window.addEventListener('resize', callback);
    return () => window.removeEventListener('resize', callback);
}

function useWindowWidth() {
    return useSyncExternalStore(subscribe, () => window.innerWidth, () => 1024);
}

function Layout() {
    const width = useWindowWidth();
    return <p>{width}px: {width < 600 ? 'one column' : 'two columns'}</p>;
}

export default function App() {
    const [copies, setCopies] = useState(1);
    return (
        <div>
            <button onClick={() => setCopies(copies + 1)}>Add a copy</button>
            {Array.from({ length: copies }, (_, i) => (
                <Layout key={i} />
            ))}
        </div>
    );
}

Tambahkan beberapa salinan lalu ubah ukuran window: setiap salinan menampilkan angka yang sama di saat yang sama. Setiap salinan punya listener-nya sendiri, dan masing-masing membaca lebarnya saat render, jadi tidak ada yang tertinggal satu frame pun.

getSnapshot harus mengembalikan nilai yang di-cache

React sering memanggil getSnapshot dan membandingkan hasilnya berdasarkan referensi. Fungsi yang membuat object atau array baru di setiap pemanggilan selalu terlihat seperti perubahan:

// Broken: a new object on every call
function getSnapshot() {
    return { count: store.count, user: store.user };
}

// Also broken: filter returns a new array every time
function getSnapshot() {
    return store.todos.filter((t) => !t.done);
}

React merender, memanggil getSnapshot, mendapat nilai yang "berbeda", merender lagi, dan seterusnya, sampai berhenti dengan "Maximum update depth exceeded". Di development, React juga lebih dulu mencatat "The result of getSnapshot should be cached to avoid an infinite loop". Build production, seperti pratinjau di sini, melewatkan peringatan itu dan hanya melaporkan error akhirnya sebagai kode singkat (Minified React error #185).

Perbaikannya adalah menjaga data di store tetap immutable: ganti object-nya saat berubah, dan kembalikan referensi yang tersimpan apa adanya.

import { useSyncExternalStore } from 'react';

let state = { todos: [{ id: 1, text: 'Write docs', done: false }] };
const listeners = new Set();

const todoStore = {
    add(text) {
        state = { ...state, todos: [...state.todos, { id: Date.now(), text, done: false }] };
        listeners.forEach((l) => l());
    },
    subscribe(listener) {
        listeners.add(listener);
        return () => listeners.delete(listener);
    },
    getSnapshot() {
        return state;
    },
};

export default function App() {
    const { todos } = useSyncExternalStore(todoStore.subscribe, todoStore.getSnapshot);
    const open = todos.filter((t) => !t.done);
    console.log('render,', todos.length, 'todos');
    return (
        <div>
            <button onClick={() => todoStore.add('Another task')}>Add task</button>
            <ul>
                {open.map((t) => (
                    <li key={t.id}>{t.text}</li>
                ))}
            </ul>
        </div>
    );
}

getSnapshot mengembalikan object state yang sama sampai add menggantinya, jadi komponen dirender sekali per perubahan. Pemfilteran terjadi di komponen, setelah snapshot dibaca, dan itu aman. Untuk memfilter di dalam store, hitung array hasil filter saat datanya berubah lalu simpan, sehingga getSnapshot bisa mengembalikan salinan yang tersimpan itu.

getServerSnapshot dan hidrasi

Di server tidak ada window, tidak ada navigator, dan tidak ada subscription. Argumen ketiga memberi tahu React apa yang harus dirender di sana:

const width = useSyncExternalStore(
    subscribe,
    () => window.innerWidth, // in the browser
    () => 1024 // on the server, and during hydration
);

React juga memakai getServerSnapshot untuk render pertama di browser saat menghidrasi HTML dari server, agar keduanya cocok. Tepat setelah hidrasi, React membaca getSnapshot dan, kalau nilai sebenarnya berbeda, merender lagi dengan nilai itu. Tanpa argumen ketiga, render di server melempar "Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering." Kalau ada boundary <Suspense> di atas komponen, server mengirim fallback dari boundary itu dan browser merender kontennya; tanpa boundary, render di server gagal.

useSyncExternalStore vs useEffect dan useState

Kamu bisa berlangganan dengan sebuah effect:

function useOnlineStatus() {
    const [online, setOnline] = useState(true);
    useEffect(() => {
        const update = () => setOnline(navigator.onLine);
        update();
        window.addEventListener('online', update);
        window.addEventListener('offline', update);
        return () => {
            window.removeEventListener('online', update);
            window.removeEventListener('offline', update);
        };
    }, []);
    return online;
}

Cara ini berfungsi, dengan dua kelemahan. Render pertama selalu menampilkan tebakan awal, dan nilai sebenarnya datang satu render kemudian, setelah effect berjalan. Dan dengan concurrent rendering (saat transition, misalnya), React bisa menjeda render di tengah jalan; kalau store berubah selama jeda itu, komponen yang dirender sebelum dan sesudahnya bisa menampilkan nilai yang berbeda. Ketidakkonsistenan itu disebut tearing. useSyncExternalStore membaca nilainya saat render dan membuat React mengulang render secara sinkron kalau store berubah, sehingga setiap komponen melihat nilai yang sama.

Pakai hook ini saat datanya berada di luar React: module store milikmu sendiri, API browser, library pihak ketiga. Sebagian besar library state (Redux, Zustand, dan lainnya) memanggilnya untukmu di dalam hook mereka. Untuk data yang menjadi milik komponenmu, useState, useReducer, dan context tetap menjadi alat yang tepat.