The React 19 Beta release is out and the accompanying blog post is a great read. Here's a quick glance at the new features and improvements that are part of this release.
- Some spicy new hooks and a concept of async functions being "actions"
useTransition- a React Hook that lets you update the state without blocking the UI.
const [isPending, startTransition] = useTransition();- https://react.dev/reference/react/useTransition
useOptimistic- a React Hook that lets you optimistically update the UI.
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);- https://react.dev/reference/react/useOptimistic
useActionState- a Hook that allows you to update state based on the result of a form action.
const [state, formAction] = useActionState(fn, initialState, permalink?);- https://react.dev/reference/react/useActionState
useFormStatus- a Hook provides status information of the last form submission.
const { pending, data, method, action } = useFormStatus();- https://react.dev/reference/react-dom/hooks/useFormStatus
useDeferredValue- a React Hook that lets you defer updating a part of the UI.
const deferredValue = useDeferredValue(value);- https://react.dev/reference/react/useDeferredValue
- Actions can now be passed to
<form action={actionFunction}>
- The
usefunction - new API to read resources in render. Which is named like a hook but doesn't have the same conditional code issue hooks have, you can give it promises and contexts according to the post. Confusing at first glance, maybe it'll settle over time. - Server components and actions continue to be a thing
- Goodbye
forwardRef, just use ref directly in props now as the second param. - Goodbye
Context.Provider, you just use<Context>as the provider now refcallbacks get a cleanup callback like effects- Goodbye
react-helmet- React now handles HTML metadata and hoists it into the head from any component - Stylesheet links and
<style>tags now available - How was this not a thing before? 🤯 - New resource preloading APIs
- Better handling of async script tags
- Better error reporting
- Web Components enter the arena with React19 now supporting Custom Elements
Insight: A common misunderstanding is that Server Components are denoted by "use server", but there is no directive for Server Components. The "use server" directive is used for Server Actions.
I think this was an easy misunderstanding to make, so I'm glad for the clarification.
This is a pretty exciting release, given the last significant release from React was March 29, 2022. The wheels are moving again!
React continues to evolve and solve a combination of new problems while fixing some of the pain points with nice quality of life improvements.
I do get the feeling that with the introduction of Server Components, the mental model of React now becomes dynamic and more complicated depending on your use case, maybe that will prove out in time as frameworks adopt it and provide opinionated workflows around it.
I'm keeping an eye on the other frameworks/libraries maturing in the space like Svelte, SolidJS, Vue, AlpineJS to see how the new React features measure up, and I might be back with a comparison post in the future.