⚛️
MODULE 12Advanced
React 19 Features
React 19 (released Dec 2024) brings first-class async, form handling, and document metadata APIs. Many patterns that required libraries are now built-in.
useOptimisticuseFormStatususeActionStateuse()ref as propServer ActionsDocument Metadata
React 19 at a Glance
⚡ Async first-class
Transitions, optimistic updates, and actions are now core primitives
📋 Forms rethought
useActionState + useFormStatus replace manual pending state management
🔧 Less boilerplate
No forwardRef, no library for <title>/<meta>, use() replaces Suspense wrappers
🖥️ Server Actions stable
'use server' is now stable — direct DB calls from form actions
1. useOptimistic
Instant UI feedback while async op is in-flight
useOptimistic Demo
useOptimistic shows the expected final state immediately while the async operation is in flight. Messages marked sending… will resolve after 1.5 s.
💬
Hello from the server!
💬
React 19 is here.
React 18 → 19 Migration Summary
| React 18 | React 19 | Notes |
|---|---|---|
| forwardRef(Component) | function Comp({ ref }) | ref is now a regular prop |
| useFormState | useActionState | Renamed + improved API |
| next/head / react-helmet | <title> / <meta> in JSX | Native document metadata |
| Context.Consumer | use(Context) | use() can be conditional |
| Implicit children | Explicit children | No implicit children type in TS |
| ReactDOM.render() | createRoot().render() | Was deprecated, now removed |
| string refs | removed | Only callback & useRef allowed |