dhpk-react-18-notes

React 18 — concurrent-rendering baseline

React 18 (March 2022) shipped the concurrent renderer. Its features are opt-in per update, unlocked by adopting the new createRoot API.

Family routing and the React/Next compatibility matrix live in docs/agent-guidance/frontend-framework-routing.md. This module owns standalone React 18 language guidance after the family is selected.

---

Signature features

createRoot / hydrateRoot (react-dom/client)

The new root API replaces ReactDOM.render and is what turns on all React 18 features. ReactDOM.render still works but warns and runs in a legacy (non-concurrent) mode.

// Before (React 17)
import { render } from 'react-dom'
render(<App />, document.getElementById('root'))

// React 18
import { createRoot } from 'react-dom/client'
const root = createRoot(document.getElementById('root'))
root.render(<App />)

SSR hydration moves from ReactDOM.hydrate to hydrateRoot.

Automatic batching

All state updates are now batched — including those inside promises, setTimeout, and native event handlers, not just React event handlers. Force a synchronous flush with flushSync when a DOM read must happen between updates.

setTimeout(() => {
  setCount(c => c + 1)
  setFlag(f => !f)
  // React 18: one re-render (batched); React 17: two re-renders
}, 1000)

Concurrent features (opt-in)

Enabled per update, not globally:

• startTransition / useTransition — mark non-urgent updates so urgent ones (typing) stay responsive.
• useDeferredValue — defer re-rendering a value under load.

import { startTransition } from 'react'
setInputValue(input)              // urgent
startTransition(() => {
  setSearchQuery(input)           // non-urgent transition
})

Streaming SSR + selective hydration

renderToPipeableStream (Node) / renderToReadableStream (web/edge) replace renderToString for streaming; <Suspense> boundaries stream and hydrate selectively.

New hooks