After several months we finally have a stable version of React 19.
This post is just a small cheat sheet for context, for more in-depth data and examples, please check
react docs
vercel docs
⚙️ Client and Server Markers
-
'use client': Marks client-side React code. -
'use server': Marks server-side functions callable by the client.
'use server'
export async function fetchUserData() { /*...*/ }
Keep in mind: All components are server components by default, and using 'use server' doesn't convert a component or enforce it to be a server component
🔥 React Server Components
What it is: Server-rendered components that execute at build time or per request.
Why?: Makes server-side rendering (SSR) workflows faster and scalable, leading to better app performance.
✨ Actions
What it is: Async functions to handle form submission, errors, and optimistic updates.
Why ?: Simplifies handling complex form logic while creating smoother and more user-friendly experiences.
You have 2 ways to create a server action
Create them in a dedicated file where you call. the use server and import it in the server component
Create them directly at the server component
📋 Form Management Hooks
- useFormStatus: Tracks the status of a form for enhanced usability when JavaScript is disabled.
- useOptimistic: Implements optimistic updates for a faster and more seamless user experience.
🐛 Better Error Reporting
What it is: Adds onCaughtError and onUncaughtError for root components.
Why ?: Makes debugging easier with clear.
🌟 New Hooks and Features
- use: Lets you read promises or other resources directly during render; can be called within loops, conditional statements, and early returns
- useDeferredValue Initial Value: Adds support for setting initial values.
🛠️ Async Script Support
What it is: Allows async scripts to be rendered anywhere in your component tree.
Why ?: Prevents duplicate scripts and speeds up loading.
<script async src="https://example.com/script.js" />
💡 Improved Third-Party Script Compatibility
What it is: Skip unexpected <head> or <body> tags during hydration.
Why?: Fixes those mismatch errors when working with third-party scripts.
🎨 Stylesheets with Precedence
What it is: Lets you control stylesheet loading order in concurrent rendering.
Why ?: Ensures styles are applied as intended.
<link rel="stylesheet" href="default.css" precedence="default" />
<link rel="stylesheet" href="specific.css" precedence="high" />
🎯 Streamlined APIs
- Streamlined Context API: Use
<Context>directly instead of<Context.Provider>.
<UserContext value="Jane Doe">
{children}
</UserContext>
- Ref Callback Cleanup: Ref callbacks now return cleanup functions.
<input ref={(ref) => () => console.log('Cleaning up 🧹')} />
💡 Hydration Error Diffs
What it is: Improve the difference hydratation errors making it easier to debug and actually fix them.
React 19 introduces several new API and workflows that potentially coudl benefit your applications, but all of them are optionals, so don't feel the presure to rush into them and convert all your components, you can do it component by component and step by step.
There are still a lot of things to improve and change, the waterfall issues related to the server actions and the suspense is one of the more popular, but the list is big, so hopefully the react team will implement some changes and updates here.
Top comments (2)
thanks man
This is funny 'useDeferredValue Initial Value: Adds support for setting initial values.'
be honest, you have no idea what useDeferredValue is for do you?
It is used mainly for having control over how the rendering is happening in regards to Suspense or to deprioritise the rendering for more expensive content.
useTransition lets you mark a state transition as non-blocking and allow other updates to interrupt it.
useDeferredValue lets you defer updating a non-critical part of the UI and let other parts update first.
I honestly don't see the point of these articles when the React documentation is clear and concise. Why would people make incomplete articles about things they don't understand, is beyond my comprehension. I see this trend over and over.