dhpk-react-19-notes

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={...}>:

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 normal prop — forwardRef is no longer needed (and is deprecated):

function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />
}
<MyInput ref={ref} />

Ref callbacks may also return a cleanup function.

<Context> as a provider

Render <Context> directly instead of <Context.Provider>:

const Theme = createContext('')
// React 19
<Theme value="dark">...</Theme>
// was: <Theme.Provider value="dark">...</Theme.Provider>

Document metadata + asset loading