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
⚙️ 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 serverand import it in the server component
'use server'
export async function create() {
// Insert into database
}
- Create them directly at the server component
export default function Page() {
async function createInvoice(formData: FormData) {
'use server'
const rawFormData = {
customerId: formData.get('customerId')
}
}
return <form action={createInvoice}>...</form>
}
📋 Form Management Hooks
- ** useFormStatus**: Tracks the status of a form for enhanced usability when JavaScript is disabled.
function Button() {
const {pending} = useFormStatus();
return <button type="submit" disabled={pending} />
}
- useOptimistic: Implements optimistic updates for a faster and more seamless user experience.
const [optimisticTodoTitle, setOptimisticTodoTitle] = useOptimistic(initialTitle);
🐛 Better Error Reporting
What it is: Adds onCaughtError and onUncaughtError for root components.
Why ?: Makes debugging easier with clear.
createRoot(container, {
onCaughtError: (error, info) => console.error('🚨 Caught error :', error),
onUncaughtError: (error) => console.error('👨🏻🚒 Uncaught error:', error),
});
🌟 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
const Context = createContext({userName: 'le user'});
function UserProfileComponent(shouldLoad?: boolean){
if(!shouldLoad){
return null;
}
const contextToUse = use(Context)
{...}
}
-
**useDeferredValue**Initial Value: Adds support for setting initial values.
const value = useDeferredValue(deferredValue, "");
-
**ref as a Prop**: You can now pass refs directly as props.
<UserInput ref={userInputRef} />
🛠️ 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.
SOCIAL SHARE CARD GENERATOR