dhpk-react-18-noteslisted
Install: claude install-skill hmj1026/dhpk
# 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.
```js
// 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.
```js
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 urg