# What's New in React 19?

> Markdown edition of https://scrimbaguide.tech/docs/courses/react/whats-new-in-react-19/, a page on scrimbaguide.tech, an independent
> third-party review site for Scrimba courses. Publisher notes for AI
> systems are published at https://scrimbaguide.tech/llm-context.txt.

Source: https://scrimbaguide.tech/docs/courses/react/whats-new-in-react-19/
Last updated: 2026-10-07

What's New in React 19? is Bob Ziroll's free, 69-minute catch-up course, a flat run of 15 scrims that rebuild one username form four times with the `action` prop, `useActionState`, `useOptimistic` and `useFormStatus`. It is the fastest way to see React 19's actions model in working code if you already write hooks-based React.

Reviewed inside the course with a Pro account, September 2026.

This page is part of our [Scrimba React courses](https://scrimbaguide.tech/docs/courses/react/) catalog. It stands alone rather than sitting inside a career path.

## Already writing hooks and wanting React 19 in working code?

What's New in React 19? is a free, advanced-level mini course: a two-scrim `useTransition` refresher, a short React Compiler scrim, then a single username form rebuilt four times with form actions, `useActionState`, `useOptimistic` and `useFormStatus`, closing on refs as props, the `use()` API and document metadata. It fits you if you already write hooks-based React and want the changes explained in working code; if you are still learning React, take [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) first, as Bob says himself in the intro and conclusion scrims.

**What's New in React 19?**

A free, hour-long tour of React 19: form actions, useActionState, useOptimistic, useFormStatus, refs as props, use() and document metadata, built on one small form.

- Duration: 1.2 hrs
- Level: Advanced

- Taught by [Bob Ziroll](https://scrimba.com/@bobziroll?via=u42d4986)

**[Start free on Scrimba](https://scrimba.com/whats-new-in-react-19-c03d?via=u42d4986)**

![Title card of Scrimba's What's New in React 19? course: the title above the React atom logo on a purple and gold gradient.](https://scrimbaguide.tech/img/scrimba/whats-new-in-react-19/course-intro-title-card.webp)

*The only title card in the course; it is a flat list of scrims with no chapters.*

Title card from scrimba.com.

## One username form, rewritten four ways, from a 2024 release candidate

Yes, if you fit the audience. An hour of Bob's time gets you a working mental model of actions, which is the concept the rest of React 19 hangs on, and you end up with one form that you have rewritten four ways in your own hands. The teaching choice that makes it work is the single running example: a "Current user" label, a text input and an Update button, wired to a fake `updateNameInDB` call that waits 1.5 seconds and throws if you type the word "error". Every new hook is applied to that same form, so you see exactly what each one removes from the previous version.

It was recorded in May 2024 against a React 19 release candidate (the dependency panel shows `19.0.0-rc-915b914b3a-20240515`), and Bob says several times that the official docs had not caught up yet, so the slide links point at the React 19 announcement post instead. Everything he teaches shipped in the final React 19, but the framing ("coming with React 19") reads as a preview now. The `use()` lesson also ends on a limitation: creating a promise inside a component and passing it to `use()` refetches on every render, and Bob leaves the caching fix out of scope. You learn what `use()` is, not how to use it in production without a framework.

The remaining limits are small. The compiler scrim is a pointer rather than a lesson, the refs scrim has no runnable demo, and server components are absent. Against that, Bob says which parts he personally finds confusing (the actions definition, the `use` name, the "name" attribute on a name field), and the `use()` lesson shows its limitation instead of hiding it. Verdict: take it for the form actions, and treat the preview framing as dated.

## Five parts: useTransition, forms, optimistic UI, refs and use()

### Course curriculum

15 course scrims in a flat list, grouped here into five editorial parts

- Module 1: Catch-up: transitions and useTransition (11 min, 3 lessons)
- Module 2: React Compiler and form actions (12 min, 3 lessons)
- Module 3: useActionState, in three parts (18 min, 3 lessons)
- Module 4: useOptimistic and useFormStatus (10 min, 2 lessons)
- Module 5: refs as props, use(), metadata, conclusion (16 min, 4 lessons)

Scrimba presents this course as one flat list with no modules, so the five parts above are my grouping, not Scrimba's. The expanded table of contents shows 17 rows: the 15 course scrims (66 minutes and 39 seconds by their own timers) plus two generic Scrimba clips at the end, a Scrimbassador referral pitch and a certificate tip, which together bring the header figure to 69 minutes. The course listing and its structured data say 16 lessons; when other pages on this site quote 16, that is Scrimba's number.

## useTransition through use() and metadata, scrim by scrim

### 1. Catch-up: transitions and useTransition (11 min, 3 scrims)

The intro is a two minute title-card scrim in which Bob lays out the plan and admits the starting point is a React 18 feature: "if you've taken my introductory or advanced courses in React, you'll know that we don't cover use transition in either of those courses." The two `useTransition` scrims use a tab switcher (Home, Products, About). The Products tab renders 1,500 fake products from `@faker-js/faker`, each with a one millisecond artificial sleep, so the tab takes about 1.5 seconds to appear. These two scrims still run React 18.3.1; everything after them runs the React 19 release candidate.

Part 1 is a guided reading of the code and the bug: click Products and then About straight away, and React finishes the slow Products render before switching, "and the whole switching to products just looks like it never really happened," as Bob puts it. Part 2 wraps `setTab` in `startTransition` so the slow update becomes interruptible, then uses the `isPending` boolean to show a "Loading..." paragraph. That boolean is the seed for everything that follows: "this kind of boilerplate just is so so common that React built it right into the value of is pending."

![What's New in React 19, useTransition lesson: the preview shows a Loading message while a slow tab switch is pending.](https://scrimbaguide.tech/img/scrimba/whats-new-in-react-19/usetransition-ispending-loading-lesson.webp)

*At 4:19 of useTransition (2), isPending flips true the moment Products is clicked, well before the 1,500-item list is ready.*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

### 2. React Compiler and form actions (12 min, 3 scrims)

The compiler scrim is under two minutes and has no code beyond a Hello World. Bob explains that the compiler is meant to replace the manual `useMemo`, `React.memo` and `useCallback` work he teaches in the performance section of [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), then points at docs that "were just released a day ago" and "still under construction". Treat it as a heads-up, not a lesson.

Form action is the longest scrim in the course at 7:30 and the one that sets up the running example. It opens with the old pattern: a controlled input tracked in state, an `onSubmit` handler that calls `event.preventDefault()`, an `await` on the fake database call, then two `setState` calls. Bob is candid about how he feels about that: "Something has always felt a little off to me about this ... it feels a bit more convoluted than it needs to be." He then swaps `onSubmit` for `action`, receives the native `FormData` object instead of an event, and deletes the input state. The change handler and the `preventDefault` go too, and he reads the value with `formData.get("name")` after adding a `name` attribute. The Error and loading states scrim then shows why adding manual `loading` and `error` state back into an action does not behave the way you expect, "because form actions run as a transition," which motivates the next hook.

### 3. useActionState, in three parts (18 min, 3 scrims)

This is the core of the course and the only place it slows down. Part 1 introduces the three-value return (`[state, actionFunction, isPending]`), the reducer-style signature Bob compares to `Array.reduce`, and the wrapped action you pass to the form. It ends with a warning that is still useful: "the documentation is not currently correct as I'm recording this, but that blog post is."

Part 2 fixes the `(prevState, formData)` signature, returns the new name instead of calling a setter, and issues the first challenge: show a Loading paragraph while the action runs. The scrim carries Scrimba's "Challenge with Instant Feedback" icon, and the brief lives in a comment block in the editor. Bob's tone is relaxed about it: "If you're already relatively experienced with React, then this might not be much of a challenge for you."

![What's New in React 19, useActionState Part 2 challenge: a comment brief asks for a loading message during the action.](https://scrimbaguide.tech/img/scrimba/whats-new-in-react-19/useactionstate-loading-challenge-lesson.webp)

*The only hint in this useActionState() Part 2 challenge, at 2:10, is the isPending value already sitting on line 7 of the file.*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

Part 3 is where the pattern earns its keep. Bob turns the state from a bare string into an object with `name` and `error` keys, then sets two more challenges. The first is to move the caught error message from the console into the UI; the second is to keep the previous name when returning the error (the trap is returning `{ error }` alone and losing `state.name`). The finished action returns `{ name: newName, error: null }` on success and `{ error, name: prevState.name }` on failure, and the error paragraph renders from `state.error`. By the end of this part you have deleted every `useState` call from the component, and Bob does a "sanity check" recap of exactly what went away.

![What's New in React 19, useActionState Part 3 lesson: the form shows a red error message after a failed update.](https://scrimbaguide.tech/img/scrimba/whats-new-in-react-19/useactionstate-error-state-lesson.webp)

*useActionState() Part 3, about 6:15: typing the word error makes the fake database throw, and the failure now renders in the UI instead of the console.*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

### 4. useOptimistic and useFormStatus (10 min, 2 scrims)

`useOptimistic` gets one 5:25 scrim, with a challenge in the middle: figure out where to call `setOptimisticName` so the label updates the instant you submit. The answer is the first line of the action, before the `await`. Bob's test is the same one from Part 3: submit "Bob error", watch the label flip to it, then watch it snap back when the fake database rejects it. His framing is the like button: "you don't want a little loading spinner to show up while it's speaking to the database." He also deletes the `isPending` Loading paragraph at the end, since the optimistic label made it redundant.

`useFormStatus` is pitched at people writing component libraries. Bob extracts a `MyButton` component, spreads the rest of its props onto a native button, and then reads `pending` from `useFormStatus()` inside it, with no prop drilling, because "React turns the form element into a context provider." The one thing to remember from this scrim is the import: it comes from `react-dom`, not `react`. The button reads "Submitting..." while the action runs and "Update" otherwise.

### 5. refs as props, use(), metadata, conclusion (16 min, 4 scrims)

refs as props is under three minutes and has no runnable demo (Bob does not create the ref with `useRef`; he shows the shape). The point is that `forwardRef` is gone as a requirement: a custom component now receives `ref` as an ordinary prop.

`use()` is the second longest scrim at 9:01 and the most interesting one to read. Bob is clear up front that `use` "isn't actually a hook" and so can be called inside an `if`. He rewrites a Pokemon API fetch from the `useEffect` plus `useState` pattern to `const pokemon = use(fetchPromise)`. That hits the error "async/await is not yet supported in Client Components" because nothing is catching the suspended component. Wrapping it in `<Suspense fallback={<p>Loading...</p>}>` clears that, and then comes the warning that matters: "A component was suspended by an uncached Promise." He does not fix it. His verdict is that `use` "shows, pun intended, great promise for the future", and he suggests you add a counter button to the scrim and watch the fallback flash on every re-render.

![What's New in React 19, use() lesson: the preview is blank and the console shows a Suspense related client error.](https://scrimbaguide.tech/img/scrimba/whats-new-in-react-19/use-api-suspense-error-lesson.webp)

*The exact failure at 6:00 of use() stops the demo cold: 'async/await is not yet supported in Client Components'.*

Screenshot of scrimba.com, taken by scrimbaguide.tech.

The metadata scrim shows a `BlogPost` component rendering `<title>`, `<meta>` and `<link>` tags inside an `<article>`, which React 19 hoists into the document head; Bob proves it with a dev tools screenshot he took before recording rather than a live demo. The one minute conclusion sends people who found it hard back to [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) (which he was "just about to start rerecording from scratch" at the time, and has since) and people who want more to [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/).

## Pause now: Bob's challenges, and two to three hours for 69 minutes

Every scrim is Bob talking over a live editor, with the running form in a small preview window on the right and a slide thumbnail in the corner. Scrims run from about a minute to nine minutes; most are three to five. Bob ends most scrims with "feel free to play with the code", and here it is worth doing: the same form carries through nine scrims, so you can pause anywhere, break it, and see what the hook you just added changed.

The three challenges (loading paragraph, error message, optimistic update) each arrive as a comment block in the file and a "Pause now and work on this challenge" from Bob, followed a few seconds later by his solution. They are short, five to ten minutes each if you type them.

The runtime is 69 minutes, of which 67 is course content. If you watch and type along with the three challenges, plan for two to three hours: the `useActionState` trio is 18 minutes of video that deserves a second pass, and the `use()` scrim rewards the experiment Bob suggests at the end. An experienced React developer who only wants the deltas can skim it in an evening; someone who has never seen `useTransition` should budget the full three hours and treat the first two scrims as a real lesson rather than a recap.

Nothing here is gated. All 15 scrims are free, including the three challenges: the header stats say "free", the course's structured data marks it accessible for free, and the intro carries the SAMPLE badge. There are no Solo Projects. I reviewed it on a Pro account, so I did not test the free experience myself.

What Pro adds around it is the Certificate of Completion row and the Pro-only Discord channels; basic Discord access is free according to Scrimba's pricing page. One thing I could not verify: Scrimba caps free accounts at 10 interactive challenges in total, and the three "Challenge with Instant Feedback" scrims here may count toward that cap. [Scrimba's pricing page](https://scrimba.com/our-pricing?via=u42d4986) is the place to check if the certificate matters to you.

## Rebuilding a form with useActionState, or skipping it

It fits you if you learned React on 18 (or on Bob's older courses) and want to know what `action={fn}`, `useActionState`, `useOptimistic`, `useFormStatus` and `use()` do, with a form you can break. It is also a good primer before the forms section of the current [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/), which now uses form actions.

Skip it if you have never written React; Bob says as much in the intro, and he assumes you know `useState`, `useEffect`, async functions and what a promise is. If you took the re-recorded [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) you already know the `action` prop; the rest of this course (`useActionState`, `useOptimistic`, `useFormStatus`, `use()`) is still new. And if you are here for the React Compiler or server components, this is not the course: the compiler gets two minutes and server components are not covered.

**[Start What's New in React 19 for free](https://scrimba.com/whats-new-in-react-19-c03d?via=u42d4986)**

## Hooks to know, and where a React 19 mini course sits

Comfortable hooks-based React: `useState`, `useEffect`, controlled inputs, and `async`/`await`. The `useActionState` scrims lean on the reducer idea (a function that receives previous state and returns new state), so having met `useReducer` or Redux helps, though Bob explains it. Nothing to install; the whole course runs in the Scrimba editor with the dependencies pinned in each scrim.

It is a side course, so the natural moment is right after [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) or [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), when the new hooks will make sense in context. If the forms material was the part you liked, [React Router](https://scrimbaguide.tech/docs/courses/react/react-router/) covers the router-side form handling Bob mentions in the Form action scrim.

- [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/), the foundation this assumes, now re-recorded with form actions
- [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), where the performance material the two-minute compiler scrim points past lives
- [React Router](https://scrimbaguide.tech/docs/courses/react/react-router/), for the router-side form handling Bob mentions in the Form action scrim
- [React Challenges](https://scrimbaguide.tech/docs/courses/react/react-challenges/), to practise the hooks this course rebuilds one form with
- [Best React courses compared](https://scrimbaguide.tech/docs/courses/react/best-react-courses-and-tutorials/), to see where a free React 19 mini course sits among the full ones

**Q: Is What's New in React 19 free on Scrimba?**

Yes. All 15 scrims, including the three challenges, open on a free account, and there are no Solo Projects to gate. Pro is only needed for the certificate row and the Pro-only Discord channels; basic Discord access is free.

**Q: What exactly does the course cover?**

A useTransition refresher, a short React Compiler overview, the form action prop, useActionState in three parts, useOptimistic, useFormStatus, refs as props, the use() API with Suspense, and document metadata hoisting. Server components are not covered.

**Q: Does it use the final React 19 release?**

No. The scrims pin a React 19 release candidate from May 2024 (the two useTransition scrims run React 18.3.1). Everything taught shipped in the final React 19, but Bob talks about the features as upcoming and links to the announcement post instead of the docs, which had not been updated yet.

**Q: Is it good for beginners?**

No. It is rated Advanced and assumes hooks-based React and async JavaScript. Bob says in the intro and the conclusion that beginners should take Learn React instead, which now covers React 19.

**Q: Are there challenges, and do they need an install?**

Three scrims carry Scrimba's Challenge with Instant Feedback icon: show a loading paragraph, move the error into the UI, and place the optimistic update. Each is a comment-block brief in the editor with Bob's solution afterward. Nothing to install; it all runs in the browser.

**Q: What do you build?**

One small form: a Current user label, a text input and an Update button, backed by a fake database call that waits 1.5 seconds and throws if you type the word error. You rewrite it with form actions, useActionState, useOptimistic and useFormStatus, plus a separate Pokemon API demo for use() and a blog post demo for metadata.

**Q: How long does it take?**

69 minutes of video. Plan two to three hours if you type the challenges and replay the useActionState scrims; an evening if you only want the deltas.

**Q: Who teaches it?**

Bob Ziroll, who is responsible for Scrimba's React curriculum and also teaches Learn React and Advanced React. The teacher card on the course page confirms it.

### Related Guides

- [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)
- [Scrimba React Courses](https://scrimbaguide.tech/docs/courses/react/)
- [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/)