dhpk-react-19-noteslisted

# 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. > Family routing and the React/Next compatibility matrix live in > `docs/agent-guidance/frontend-framework-routing.md`. This module owns > standalone React 19 language guidance after the family is selected. --- ## 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)` — read a Promise or Context; unlike other hooks it may be called conditionally / inside loops. ### `ref` as a prop Function components receive `ref` as a norm