React 19 New Features: Everything You Need to Know
React 19 New Features: Everything You Need to Know
04-01-2026, 05:47 PM
1. Actions and useActionState
Actions simplify form handling and async mutations. The new useActionState hook replaces the need for manual loading and error state management.
Code:
import { useActionState } from 'react';
function UpdateProfile() {
const [state, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const name = formData.get('name');
const result = await updateUser(name);
if (result.error) return { error: result.error };
return { success: true };
},
null
);
return (
<form action={submitAction}>
<input name="name" />
<button disabled={isPending}>
{isPending ? 'Saving...' : 'Save'}
</button>
{state?.error && <p>{state.error}</p>}
</form>
);
}2. useOptimistic Hook
Show optimistic UI updates before server confirmation:
Code:
import { useOptimistic } from 'react';
function TodoList({ todos }) {
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo) => [...state, { ...newTodo, pending: true }]
);
async function addTodo(formData) {
const title = formData.get('title');
addOptimisticTodo({ title, id: Date.now() });
await saveTodo(title);
}
return (
<>
{optimisticTodos.map(todo => (
<li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
{todo.title}
</li>
))}
<form action={addTodo}>
<input name="title" />
<button>Add</button>
</form>
</>
);
}3. use() API
The new use() function lets you read promises and context conditionally:
Code:
import { use } from 'react';
function UserProfile({ userPromise }) {
const user = use(userPromise);
return <h1>{user.name}</h1>;
}
// Can also read context conditionally
function ThemeButton({ showTheme }) {
if (showTheme) {
const theme = use(ThemeContext);
return <button className={theme}>Click</button>;
}
return <button>Click</button>;
}4. Document Metadata Support
Natively render title and meta tags from any component:
Code:
function BlogPost({ post }) {
return (
<article>
<title>{post.title}</title>
<meta name="description" content={post.summary} />
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}5. Ref as a Prop
No more forwardRef needed. Refs can be passed as regular props:
Code:
function CustomInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
// Usage
<CustomInput ref={myRef} placeholder="Type here" />6. Improved Error Handling
React 19 provides better error messages and removes duplicate error logging in development mode.
7. Stylesheet and Script Support
Components can declare stylesheet dependencies that React will manage and deduplicate automatically.
Migration Tips
- Update to React 19 using npm install react@latest
- Replace useFormState with useActionState
- Remove forwardRef wrappers and pass ref as prop
- Adopt Actions for form submissions
- Test thoroughly as some deprecated APIs are removed
What React 19 feature are you most excited about? Comment below!
React 19 brings major improvements to the developer experience with new hooks, better server component support, and simplified patterns. Here is a comprehensive overview of the key features.
1. Actions and useActionState
Actions simplify form handling and async mutations. The new useActionState hook replaces the need for manual loading and error state management.
Code:
import { useActionState } from 'react';
function UpdateProfile() {
const [state, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const name = formData.get('name');
const result = await updateUser(name);
if (result.error) return { error: result.error };
return { success: true };
},
null
);
return (
<form action={submitAction}>
<input name="name" />
<button disabled={isPending}>
{isPending ? 'Saving...' : 'Save'}
</button>
{state?.error && <p>{state.error}</p>}
</form>
);
}2. useOptimistic Hook
Show optimistic UI updates before server confirmation:
Code:
import { useOptimistic } from 'react';
function TodoList({ todos }) {
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo) => [...state, { ...newTodo, pending: true }]
);
async function addTodo(formData) {
const title = formData.get('title');
addOptimisticTodo({ title, id: Date.now() });
await saveTodo(title);
}
return (
<>
{optimisticTodos.map(todo => (
<li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
{todo.title}
</li>
))}
<form action={addTodo}>
<input name="title" />
<button>Add</button>
</form>
</>
);
}3. use() API
The new use() function lets you read promises and context conditionally:
Code:
import { use } from 'react';
function UserProfile({ userPromise }) {
const user = use(userPromise);
return <h1>{user.name}</h1>;
}
// Can also read context conditionally
function ThemeButton({ showTheme }) {
if (showTheme) {
const theme = use(ThemeContext);
return <button className={theme}>Click</button>;
}
return <button>Click</button>;
}4. Document Metadata Support
Natively render title and meta tags from any component:
Code:
function BlogPost({ post }) {
return (
<article>
<title>{post.title}</title>
<meta name="description" content={post.summary} />
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}5. Ref as a Prop
No more forwardRef needed. Refs can be passed as regular props:
Code:
function CustomInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
// Usage
<CustomInput ref={myRef} placeholder="Type here" />6. Improved Error Handling
React 19 provides better error messages and removes duplicate error logging in development mode.
7. Stylesheet and Script Support
Components can declare stylesheet dependencies that React will manage and deduplicate automatically.
Migration Tips
- Update to React 19 using npm install react@latest
- Replace useFormState with useActionState
- Remove forwardRef wrappers and pass ref as prop
- Adopt Actions for form submissions
- Test thoroughly as some deprecated APIs are removed
What React 19 feature are you most excited about? Comment below!
Recently Browsing
1 Guest(s)
1 Guest(s)
Recently Browsing
1 Guest(s)
1 Guest(s)