Concurrent Rendering

// transitions in practice
const [query, setQuery] = useState('')
const [isPending, startTransition] = useTransition()
function onChange(e) {
  setQuery(e.target.value)                                     // SyncLane: the input updates this frame
  startTransition(() => setFilter(e.target.value))             // TransitionLane: the 10,000-row filter follows, interruptible
}
// isPending: true until the transition commits. show opacity: 0.6 on the list, not a spinner (the old list stays visible)

// useDeferredValue: when the expensive consumer owns the deferral
function Results({ query }) {
  const deferred = useDeferredValue(query)                     // first render: old value (urgent); second: new value (transition lane)
  const rows = useMemo(() => filter(all, deferred), [deferred])   // memo so the urgent re-render with the old value is free
  return <List rows={rows} stale={deferred !== query} />
}

// what a transition does NOT do: make the work faster. a 60 ms filter is still 60 ms of CPU; it is now in 5 ms slices with input between.
// what it does: keep the input responsive, keep the old content visible, let a newer keystroke cancel an older filter render.
// Suspense inside a transition: a boundary that already has content keeps it (no fallback flash); a new boundary shows its fallback.
// navigation (React Router, Next.js): wrapped in startTransition by the framework, so the old page stays until the new one is ready.

// Suspense: the boundary decides what hides; the promise decides when
<Suspense fallback={<PageSkeleton />}>                 // the whole page hides if anything inside suspends
  <Header />
  <Suspense fallback={<ListSkeleton />}>               // nest: only the list hides when its data is pending
    <List />                                           // List reads with use(listPromise) or a suspense-enabled data hook
  </Suspense>
  <Suspense fallback={<SidebarSkeleton />}>
    <Sidebar />
  </Suspense>
</Suspense>

// the promise must be stable: cache it outside render
const cache = new Map()
function fetchUser(id) { if (!cache.has(id)) cache.set(id, fetch(`/api/users/${id}`).then(r => r.json())); return cache.get(id) }
function Profile({ id }) { const user = use(fetchUser(id)); return <h1>{user.name}</h1> }   // same promise object on the retry → resolves

// SuspenseList (experimental) orders reveals (forwards, backwards, together) so streamed boundaries do not pop in randomly.
// errors: a rejected promise throws at use(); the nearest Error Boundary catches it (class with componentDidCatch / static getDerivedStateFromError).
// lazy(): a component whose module import is a promise; Suspense handles the loading; the retry renders the resolved component.