// the five mismatch shapes and their fixes
// 1. time
function Updated({ at }) { return <p>{formatRelative(at, Date.now())}</p> }                 // server: "5 minutes ago"; client, later: "6 minutes ago"
function Updated({ at }) { const now = useNow(); return <p>{formatRelative(at, now)}</p> }    // useNow: useSyncExternalStore with getServerSnapshot = () => serverNow (passed from the server), updates after mount
// or: render the absolute time on both, and upgrade to relative in an effect; or suppressHydrationWarning for a timestamp you accept differing

// 2. environment
function Nav() { const mobile = window.innerWidth < 600 }                                    // throws on the server; or mismatches if guarded with typeof window
function Nav() { const mobile = useMediaQuery('(max-width: 600px)', { ssr: false }) }         // returns a server value (false) on both until mount, then the real one
// pattern: const isClient = useSyncExternalStore(() => () => {}, () => true, () => false)   // false on the server and during hydration; true after

// 3. storage and auth
function Theme() { const t = localStorage.getItem('theme') }                                 // server has no localStorage; client's first render differs
// fix: put the theme in a cookie (the server reads it); or a server snapshot of "light" and switch after mount (a brief flash, or a blocking inline script that sets a class before paint)

// 4. randomness and ids
<label htmlFor={`f-${Math.random()}`}>                                                      // different on both
<label htmlFor={useId()}>                                                                    // stable from the tree position; identical on server and client

// 5. invalid nesting
<p><div>…</div></p>                                                                          // the browser closes the <p> before the <div>: the DOM tree differs from the JSX
// fix: valid HTML (the browser course part 2 has the tree builder rules; React 19 errors on known invalid nestings in dev)

// React inside a WebView, or a native shell around a React web app
// 1. the bridge: window.ReactNativeWebView.postMessage(json) → native; native → webView.evaluateJavaScript / injectJavaScript → window.onNativeMessage
//    treat it as a network boundary: typed messages, versioned, with acks; never assume synchronous replies
// 2. what the web app cannot do natively well: file pickers, camera, biometrics, push, deep links, the back button, safe areas, keyboard avoidance
//    → native handles these and the bridge carries results; the React app renders state it receives
// 3. navigation: one of (a) the web app owns routing inside the WebView (history API; native back button → window.history.back() via the bridge),
//    or (b) native owns screens and each WebView is one page (no SPA navigation; cheaper mental model; more WebView instances)
// 4. performance: a WebView is a browser; everything in the browser course applies, plus: cold start of the WebView itself (~300 to 800 ms on Android),
//    no shared cache with the system browser, and an older engine on some devices (Android System WebView updates lag). ship for the oldest you support
// 5. auth: cookies in a WebView are per-app; tokens via the bridge or a cookie set by native. do not rely on the system browser's session
// 6. hydration in a WebView: same rules; the first render often comes from a bundled HTML file (file:// or an app scheme), so SSR may be a build-time render
// 7. React Native (not a WebView): the same React, a different renderer (Fabric) producing native views; no DOM, no CSS, the same fiber, hooks, scheduler, reconciliation.
//    parts 1 to 5 of this course apply unchanged; parts 9, 12, 13 differ in the host