Professional React · Lesson 19 of 21
What's new in React 19
Actions, useActionState, use, ref as a prop, and the Compiler.
The preview here runs React 18 (the last version shipped as a single browser file), and everything you've learned works the same in React 19. But React 19 (December 2024) added important features you'll meet in Next.js and new projects, so these examples are for reading:
Actions and useActionState
// A form whose action is an async function: React tracks pending state and errors
function JoinForm() {
const [error, submitAction, isPending] = useActionState(async (previous, formData) => {
const res = await joinCourse(formData.get("email"))
return res.ok ? null : res.message // the new state
}, null)
return (
<form action={submitAction}>
<input name="email" type="email" required />
<button disabled={isPending}>{isPending ? "Joining…" : "Join"}</button>
{error && <p>{error}</p>}
</form>
)
}<form action={fn}> now accepts an async function; React tracks the pending state and result, and resets the form on success. useOptimistic shows the expected result immediately (like a like) until the server responds.
use, and ref as a prop
// use() reads a promise (suspending until it resolves) or a context, even inside an if
function Comments({ commentsPromise }) {
const comments = use(commentsPromise)
return comments.map((c) => <p key={c.id}>{c.text}</p>)
}
// ref is a normal prop now: no more forwardRef
function SearchInput({ ref, ...props }) {
return <input ref={ref} {...props} />
}| Before | React 19 |
|---|---|
onSubmit + useState(loading) + try/catch | <form action={fn}> + useActionState |
forwardRef((props, ref) => …) | function C({ ref }) { … } |
useContext(Ctx) |
|
<Ctx.Provider value> | <Ctx value> |
useMemo and useCallback by hand | React Compiler adds them for you |
Quick question
In React 19, how do you pass a ref to your own component?
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.