// ✗ FRAGILE in React 18 concurrent mode
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine)

  useEffect(() => {
    const handler = () => setIsOnline(navigator.onLine)
    window.addEventListener('online', handler)
    window.addEventListener('offline', handler)
    return () => {
      window.removeEventListener('online', handler)
      window.removeEventListener('offline', handler)
    }
  }, [])

  return isOnline
}

import { useSyncExternalStore } from 'react'

// Signature:
// useSyncExternalStore(
//   subscribe,          // (callback) => unsubscribe
//   getSnapshot,        // () => currentValue (must be referentially stable)
//   getServerSnapshot   // optional — () => value for SSR
// )

function useOnlineStatus() {
  return useSyncExternalStore(
    // subscribe: called once; React passes a callback to re-render when the store changes
    (callback) => {
      window.addEventListener('online', callback)
      window.addEventListener('offline', callback)
      return () => {
        window.removeEventListener('online', callback)
        window.removeEventListener('offline', callback)
      }
    },
    // getSnapshot: must return the same value if nothing changed
    () => navigator.onLine,
    // getServerSnapshot: navigator is not available on the server
    () => true
  )
}

function NetworkStatus() {
  const isOnline = useOnlineStatus()
  return <p>You are {isOnline ? 'online' : 'offline'}.</p>
}

import { useSyncExternalStore } from 'react'

function getSnapshot() {
  return window.innerWidth   // primitive — stable as long as width hasn't changed
}

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

function useWindowWidth() {
  return useSyncExternalStore(
    subscribe,
    getSnapshot,
    () => 0   // server snapshot — no window on server
  )
}

function ResponsiveLayout() {
  const width = useWindowWidth()

  return (
    <div>
      <p>Window width: {width}px</p>
      {width &lt; 768 ? <MobileNav /> : <DesktopNav />}
    </div>
  )
}

// store.js — a minimal external store
function createStore(initialState) {
  let state = initialState
  const listeners = new Set()

  function getState() {
    return state
  }

  function setState(updater) {
    state = typeof updater === 'function' ? updater(state) : updater
    listeners.forEach(l => l())   // notify all subscribers
  }

  function subscribe(listener) {
    listeners.add(listener)
    return () => listeners.delete(listener)   // unsubscribe
  }

  return { getState, setState, subscribe }
}

// Create a store (module-level — lives outside React)
const counterStore = createStore({ count: 0 })

// Hook to consume it
function useCounterStore() {
  return useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getState,
    counterStore.getState   // same for SSR in this simple case
  )
}

// Component
function Counter() {
  const { count } = useCounterStore()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => counterStore.setState(s => ({ count: s.count + 1 }))}>
        Increment
      </button>
    </div>
  )
}

function useThemePreference() {
  return useSyncExternalStore(
    (callback) => {
      const mq = window.matchMedia('(prefers-color-scheme: dark)')
      mq.addEventListener('change', callback)
      return () => mq.removeEventListener('change', callback)
    },
    // Client snapshot
    () => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
    // Server snapshot — no matchMedia on server; default to light
    () => 'light'
  )
}