React is a free and open-source front-end JavaScript UI library that allows the building of user interfaces based on the components. The React Core Team announced a React 19 release candidate (RC) this past April. This major version brings several updates and new patterns, aimed at improving performance, ease of use, and developer experience. React 19 brings in a number of state-of-the-art improvements to enhance developer experience and performance even further To show you how to use these new features, we'll go over the highlights in this post along with some code samples.
Improved Server-Side Rendering (SSR)
React 19 introduces Partial Hydration to optimize SSR, where the most critical parts of the page are hydrated first, and non-essential parts are hydrated later.
// React component
function CriticalComponent() {
return <div>Critical UI loaded immediately!</div>;
}
function NonCriticalComponent() {
return <div>Non-essential UI loaded later.</div>;
}
// Server-side Rendering logic (simplified)
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('critical-root'), <CriticalComponent />);
setTimeout(() => {
hydrateRoot(document.getElementById('non-critical-root'), <NonCriticalComponent />);
}, 5000); // Hydrate the non-critical component after a delay
Here, the critical component is hydrated first, ensuring users can interact with the essential part of the UI while the non-essential components load in the background.
Actions
Performing a data mutation and updating the state in response is a popular use case in React applications. For instance, you would perform an API request and manage the answer when a user submits a form to alter their name. Previously, you had to manually manage failures, optimistic updates, waiting states, and sequential requests. It introduces support for async functions in transitions in React 19 so that they may take care of forms, failures, waiting states, and optimistic updates automatically.
For example, you can use useTransition to handle the pending state for you:
// Using pending state from Actions
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
})
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
The async transition will immediately set the isPending state to true, make the async request(s), and switch isPending to false after any transitions. This allows you to keep the current UI responsive and interactive while the data is changing. By convention, functions that use async transitions are called “Actions”.
Automatic Memory Management
React 19 automatically takes care of manual resource cleaning, including event listeners and timers. Memory leaks brought on by neglected cleanups are no longer a concern.
import React, { useEffect } from 'react';
function MouseTracker() {
useEffect(() => {
const handleMouseMove = (event) => {
console.log('Mouse position:', event.clientX, event.clientY);
};
window.addEventListener('mousemove', handleMouseMove);
// No need to manually clean up in React 19!
return () => window.removeEventListener('mousemove', handleMouseMove);
}, []);
return <div>Move your mouse around!</div>;
}
React 19 ensures that even if you forget the removeEventListener, it will automatically clean up when the component is unmounted, preventing memory leaks.
Improved TypeScript Support
Better TypeScript support is included in React 19, particularly for hooks and component properties. Improved type inference eliminates the requirement for human type annotations.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // TypeScript automatically infers 'count' as a number
const increment = () => setCount(prev => prev + 1);
return <button onClick={increment}>Count: {count}</button>;
}
TypeScript automatically infers that count is a number without needing explicit typing, streamlining your TypeScript development.
Experimental Hooks for Data Fetching
React 19 introduces experimental hooks for data fetching that integrate with concurrent rendering, helping developers manage async data without third-party libraries.
Example: Using the useDataFetch Experimental Hook
import { useDataFetch } from 'react'; // Hypothetical API in React 19
function UserProfile() {
const { data, error, isLoading } = useDataFetch('/api/user');
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error fetching data</p>;
return <div>Welcome, {data.name}!</div>;
}
While still experimental, this hook simplifies data fetching by providing an integrated solution that works smoothly with React's concurrent rendering model.
New hook: useActionState
To make the common cases easier for Actions, Now added a new hook called useActionState:
const [error, submitAction, isPending] = useActionState(
async (previousState, newName) => {
const error = await updateName(newName);
if (error) {
// You can return any result of the action.
// Here, we return only the error.
return error;
}
// handle success
return null;
},
null,
);
useActionState accepts a function (the “Action”), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, useActionState will return the last result of the Action as data, and the pending state of the Action as pending.
React DOM: New hook: useFormStatus
It is typical practice in design systems to create design components without drilling props down to the component when they need access to data about the <form> they are in. This can be done via Context, but to make the typical scenario easier, here created a new hook useFormStatus: :
import {useFormStatus} from 'react-dom';
function DesignButton() {
const { pending } = useFormStatus();
return <button type="submit" disabled={pending} />
}
useFormStatus reads the status of the parent <form> as if the form was a Context provider.
<Context> as a provider
In React 19, you can render <Context> as a provider instead of <Context.Provider>:
const ThemeContext = createContext('');
function App({children}) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}
New Context providers can use <Context> and we will be publishing a codemod to convert existing providers. In future versions we will deprecate <Context.Provider>.
useOptimistic Hook
React 19 introduces the useOptimistic hook, which helps you create optimistic UI updates. This is perfect for scenarios where you want to show changes in the UI before the actual data is confirmed from the server.
Example: Optimistic Updates for Form Submissions
import React, { useState } from 'react';
function OptimisticForm() {
const [name, setName] = useState('');
const [optimisticName, setOptimisticName] = useState('');
const handleSubmit = async (event) => {
event.preventDefault();
// Optimistic update
setOptimisticName(name);
// Simulate server request
await new Promise((resolve) => setTimeout(resolve, 1000));
// Normally, you'd wait for the real data here
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
<p>Optimistic Name: {optimisticName}</p>
</div>
);
}
export default OptimisticForm;
In this instance, the useOptimistic hook enables you to display user input right away, as though the server had validated it. While the real confirmation procedure is carried out asynchronously in the background, the user interface appears more responsive.
Here is brif comparision between React 19 and React 18
Conclusion
Strong new features focused on scalability, developer experience, and performance are introduced in React 19. This version takes React development to new levels with enhanced concurrent rendering, SSR optimizations, new developer tools, and TypeScript integration.
