React: What is the useSyncExternalStore hook?

1import { useSyncExternalStore } from "react";
2
3// External store
4let listeners: Array<() => void> = [];
5let state = { count: 0 };
6
7function subscribe(callback: () => void) {
8  listeners.push(callback);
9  return () => {
10    listeners = listeners.filter(l => l !== callback);
11  };
12}
13
14function getSnapshot() {
15  return state;
16}
17
18function increment() {
19  state = { ...state, count: state.count + 1 };
20  listeners.forEach(l => l());
21}
22
23// Component
24function Counter() {
25  const { count } = useSyncExternalStore(subscribe, getSnapshot);
26  return (
27    <div>
28      <p>Count: {count}</p>
29      <button onClick={increment}>Increment</button>
30    </div>
31  );
32}

1function useOnlineStatus() {
2  return useSyncExternalStore(
3    (callback) => {
4      window.addEventListener("online", callback);
5      window.addEventListener("offline", callback);
6      return () => {
7        window.removeEventListener("online", callback);
8        window.removeEventListener("offline", callback);
9      };
10    },
11    () => navigator.onLine,
12    () => true // SSR fallback
13  );
14}
15
16function StatusBar() {
17  const isOnline = useOnlineStatus();
18  return <div>{isOnline ? "Online" : "Offline"}</div>;
19}