React useSyncExternalStore: đọc dữ liệu ngoài React

useSyncExternalStore giúp một component theo dõi (subscribe) dữ liệu nằm ngoài React và render lại mỗi khi dữ liệu đó thay đổi. Bạn truyền cho nó hai hàm: subscribe, cho React biết cách lắng nghe thay đổi, và getSnapshot, trả về giá trị hiện tại.

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>
    );
}

Hai component Display không dùng chung props hay context nào, vậy mà cả hai cùng cập nhật, vì cả hai đều subscribe vào cùng một store. Nút bấm gọi một hàm bình thường, không phải hàm setter của React. Thêm một <Display name="Sidebar" /> thứ ba và nó tham gia ngay mà không cần sửa gì khác.

Cú pháp

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

• subscribe(callback) bắt đầu lắng nghe, gọi callback mỗi khi dữ liệu có thể đã thay đổi, và trả về một hàm hủy đăng ký. React gọi nó sau khi component được mount và gọi hàm được trả về khi unmount.
• getSnapshot() trả về giá trị hiện tại. React gọi nó trong mỗi lần render và sau mỗi lần được thông báo, rồi so sánh kết quả với lần trước bằng Object.is. Giá trị giống nhau thì không render.
• getServerSnapshot() (không bắt buộc) trả về giá trị dùng trên máy chủ và khi hydration.

Hãy định nghĩa subscribe bên ngoài component, hoặc giữ nó ổn định bằng useCallback. Nếu bạn truyền một hàm subscribe mới ở mỗi lần render, React sẽ hủy đăng ký rồi đăng ký lại mỗi lần như vậy.

API trình duyệt đóng vai trò store

Bất cứ thứ gì có một giá trị hiện tại và phát ra sự kiện khi giá trị đó thay đổi đều hợp với mô hình này. navigator.onLine cùng các sự kiện online và offline là ví dụ kinh điển.

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>
    );
}

Hãy tắt mạng (hoặc chọn Offline trong công cụ dành cho nhà phát triển của trình duyệt) và dòng chữ thay đổi mà không cần tải lại trang. Đối số thứ ba nói "cứ coi như đang online" khi render trên máy chủ, nơi không có navigator. Bọc lời gọi hook trong useOnlineStatus biến nó thành một custom hook mà component nào cũng dùng được.

Độ rộng cửa sổ cũng hoạt động theo cách tương tự:

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>
    );
}

Thêm vài bản sao rồi thay đổi kích thước cửa sổ: mọi bản sao đều hiển thị cùng một con số vào cùng một thời điểm. Mỗi bản sao có listener riêng, và mỗi bản đọc độ rộng ngay trong lúc render, nên không bản nào chậm hơn dù chỉ một khung hình.

getSnapshot phải trả về giá trị đã cache

React gọi getSnapshot thường xuyên và so sánh kết quả theo tham chiếu. Một hàm tạo object hoặc mảng mới ở mỗi lần gọi sẽ luôn trông như có thay đổi:

// 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 render, gọi getSnapshot, nhận một giá trị "khác", render lại, cứ thế tiếp diễn cho đến khi dừng với lỗi "Maximum update depth exceeded". Ở môi trường development, React còn ghi log "The result of getSnapshot should be cached to avoid an infinite loop" trước đó. Bản build production, như phần xem trước ở đây, bỏ qua cảnh báo đó và chỉ báo lỗi cuối cùng dưới dạng một mã ngắn (Minified React error #185).

Cách khắc phục là giữ dữ liệu trong store ở dạng bất biến (immutable): thay object mới khi dữ liệu thay đổi, và trả về nguyên tham chiếu đang lưu.

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 trả về cùng một object state cho đến khi add thay thế nó, nên component chỉ render một lần cho mỗi thay đổi. Việc lọc diễn ra trong component, sau khi đọc snapshot, và điều đó an toàn. Nếu muốn lọc ngay trong store, hãy tính mảng đã lọc khi dữ liệu thay đổi rồi lưu lại, để getSnapshot có thể trả về bản đã lưu đó.

getServerSnapshot và hydration

Trên máy chủ không có window, không có navigator và cũng không có subscription nào. Đối số thứ ba cho React biết cần render gì ở đó:

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

React cũng dùng getServerSnapshot cho lần render đầu tiên trong trình duyệt khi hydrate HTML từ máy chủ, để hai bên khớp nhau. Ngay sau hydration, React đọc getSnapshot và, nếu giá trị thật khác đi, sẽ render lại với giá trị đó. Thiếu đối số thứ ba, lần render trên máy chủ sẽ ném lỗi "Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering." Nếu có một boundary <Suspense> phía trên component, máy chủ gửi fallback của boundary đó và trình duyệt render phần nội dung thay thế; nếu không có boundary, lần render trên máy chủ thất bại.

useSyncExternalStore so với useEffect và useState

Bạn có thể subscribe bằng một 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;
}

Cách này chạy được, nhưng có hai điểm yếu. Lần render đầu tiên luôn hiển thị giá trị đoán ban đầu, còn giá trị thật đến chậm một lần render, sau khi effect chạy. Ngoài ra, với concurrent rendering (chẳng hạn trong một transition), React có thể tạm dừng một lần render giữa chừng; nếu store thay đổi trong lúc tạm dừng, các component được render trước và sau đó có thể hiển thị các giá trị khác nhau. Sự không nhất quán này gọi là tearing. useSyncExternalStore đọc giá trị ngay trong lúc render và buộc React render lại một cách đồng bộ nếu store đã thay đổi, nên mọi component đều thấy cùng một giá trị.

Hãy dùng hook này khi dữ liệu nằm ngoài React: module store của riêng bạn, một API trình duyệt, một thư viện của bên thứ ba. Hầu hết thư viện quản lý state (Redux, Zustand và nhiều thư viện khác) đã gọi nó giúp bạn bên trong hook của chúng. Với dữ liệu thuộc về chính các component, useState, useReducer và context vẫn là những công cụ phù hợp.