react-19-noteslisted
Install: claude install-skill hmj1026/dhpk
# React 19 — current stable major
React 19 (December 2024) centers on Actions (async transitions for data
mutations) and a batch of ergonomics that remove long-standing boilerplate.
> Floor role: React 19 is **recommended but not required** for Next.js 16 —
> its peerDependency is `react: "^18.2.0 || ^19.0.0"`, so a React 18.2+ app
> adopts Next.js 16 without a React major upgrade. This module is the
> standalone home for React-language guidance — pair it cross-stack with a
> `nextjs-<version>` module, or use it for any non-Next React app.
---
## Signature features
### Actions + form actions
"Actions" are async transitions that handle pending state, errors, and
optimistic updates. Pass an async function to a `<form action={...}>`:
```js
function ChangeName() {
const [error, submitAction, isPending] = useActionState(
async (prev, formData) => {
const error = await updateName(formData.get('name'))
if (error) return error
redirect('/path')
return null
},
null,
)
return (
<form action={submitAction}>
<input name="name" />
<button disabled={isPending}>Update</button>
{error && <p>{error}</p>}
</form>
)
}
```
### New hooks
- `useActionState(fn, initial)` -> `[state, dispatchAction, isPending]`.
- `useOptimistic(value)` -> show an optimistic value while an action is
pending.
- `useFormStatus()` (from `react-dom`) -> read the enclosing form's pending
state without prop-drilling.
- `use(resource)` — rea