React 19 beta thoughts
Believe it or not, it’s been almost 2 years since the last React release (v18.2.0). The react team has obviously been up to a lot in the meantime, and yesterday the official beta for v19 was released!
Here are the things that stood out to me from the React 19 beta announcement
Actions
Server components
Server actions
And more…
Actions
From the announcement:
A common use case in React apps is to perform a data mutation and then update state in response.
You’ve probably done this1. Make an async request to your backend and keep some state to track when the request is pending/completed.
Making this a lot easier are actions and the associated useActionState hook.
Actions are transitions using an async function, which you’ll pass to a form element2
<form action={someAction}>
<input name={name} />
<button type="submit">Submit</button>
</form>
You can create an action in a couple ways, but I’m intrigued by the aformentioned useActionState. It gives you pending state and error handling!
const [error, someAction, isPending] = useActionState(
async (prevState, formData) => {
// Access form data, do async stuff,
// return errors, etc.
},
)
What I really like about this is
There’s a lot less state to manually manage
It’s via HTML form submission, the way the web is supposed to work3
Oh, and there’s also a new useOptimistic hook. It works like useState, but the state gets automatically rolled back if an action fails!
Server components
Server components aren’t included in client bundles. They run to produce some HTML, but only that HTML is shipped to users.
The parts of an app that are server components isn’t part of the client-side React app.
Here’s how the announcement put its:
Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the “server” in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
I hadn’t actually considered running server components on CI before. It makes sense, though. Essentially Next.JS’s static site generation.
Using server components requires bundler or framework integration (such as Next.JS or Remix). It’s not something you’d use in a traditional client app (such as create-react-app or Vite).
Server actions
This is probably the most magical part of React 19, and I don’t totally understand how it works, yet.
Server actions combine the last two items. They’re only present on the server, but somehow our client components can reference them and React (and a framework supporting them) will make a network request to it.
Here’s the example from React’s server action docs:
function EmptyNote () {
async function createNoteAction() {
'use server';
await db.notes.create();
}
return <Button onClick={createNoteAction}/>;
}
Note the ‘use server’
directive in the action. The action won’t be included in the client bundle, but React still knows how to use it. Magic 🤯
Other stuff
There’s plenty of other stuff, too. Check out
All in all, React 19 will be a huge update. And it’s really interesting seeing more from React about integrating with the server in a full-stack architecture.
Until next time ✌️
Need help developing a web app or want chat about frontend dev? Check out https://landslide.software.
I sure have.
Custom components can take an action, as well, as long as they useTransition.