React 19 introduces several powerful new hooks that revolutionize how we handle forms and manage optimistic updates in our applications. In this blog, we'll explore useFormStatus, useActionState, and useOptimistic - three hooks that make our React applications more responsive and user-friendly.
useFormStatus: Enhanced Form Handling
The useFormStatus hook provides real-time information about form submissions, making it easier to create responsive and accessible forms. Let's explore how this hook improves upon React 18's form handling capabilities.
Example 1: Basic Form Loading State
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
</button>
);
}
function SignupForm() {
return (
<form action={async (formData) => {
await submitSignupData(formData);
}}>
<input name="email" type="email" />
<input name="password" type="password" />
<SubmitButton />
</form>
);
}
In React 18, you'd need to manually manage loading states using useState. The new useFormStatus hook automatically handles this, reducing boilerplate code.
Example 2: Multiple Form States
function FormStatus() {
const { pending, data, method } = useFormStatus();
return (
<div role="status">
{pending && <span>Submitting via {method}...</span>}
{!pending && data && <span>Last submission: {new Date().toLocaleString()}</span>}
</div>
);
}
function ContactForm() {
return (
<form action={async (formData) => {
await submitContactForm(formData);
}}>
<textarea name="message" />
<FormStatus />
<SubmitButton />
</form>
);
}
Example 3: Form Validation Status
function ValidationStatus() {
const { pending, validationErrors } = useFormStatus();
return (
<div role="alert">
{validationErrors?.map((error, index) => (
<p key={index} className="error">{error}</p>
))}
</div>
);
}
function RegistrationForm() {
return (
<form action={async (formData) => {
const errors = validateRegistration(formData);
if (errors.length) throw errors;
await register(formData);
}}>
<input name="username" />
<input name="email" type="email" />
<ValidationStatus />
<SubmitButton />
</form>
);
}
Example 4: Multi-Step Form Progress
function FormProgress() {
const { pending, step, totalSteps } = useFormStatus();
return (
<div className="progress-bar">
<div
className="progress"
style={{width: `${(step / totalSteps) * 100}%`}}
/>
<span>Step {step} of {totalSteps}</span>
</div>
);
}
function WizardForm() {
return (
<form action={async (formData) => {
await submitWizardData(formData, { steps: 3 });
}}>
{/* Form steps */}
<FormProgress />
<SubmitButton />
</form>
);
}
Example 5: File Upload Progress
function UploadProgress() {
const { pending, progress } = useFormStatus();
return (
<div>
{pending && progress && (
<div className="upload-progress">
<div
className="progress-bar"
style={{width: `${progress}%`}}
/>
<span>{progress}% uploaded</span>
</div>
)}
</div>
);
}
function FileUploadForm() {
return (
<form action={async (formData) => {
await uploadFile(formData);
}}>
<input type="file" name="document" />
<UploadProgress />
<SubmitButton />
</form>
);
}
useActionState: Managing Action Results
The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.
Example 1: Basic Action State
function SubmissionStatus() {
const state = useActionState();
return (
<div>
{state.status === 'success' && <p>Submission successful!</p>}
{state.status === 'error' && <p>Error: {state.error.message}</p>}
</div>
);
}
function CommentForm() {
return (
<form action={async (formData) => {
await submitComment(formData);
}}>
<textarea name="comment" />
<SubmissionStatus />
<SubmitButton />
</form>
);
}
Example 2: Action History
function ActionHistory() {
const state = useActionState();
return (
<div>
<h3>Recent Actions</h3>
<ul>
{state.history.map((action, index) => (
<li key={index}>
{action.type} - {action.timestamp}
{action.status === 'error' && ` (Failed: ${action.error.message})`}
</li>
))}
</ul>
</div>
);
}
Example 3: Retry Mechanism
function RetryableAction() {
const state = useActionState();
return (
<div>
{state.status === 'error' && (
<button
onClick={() => state.retry()}
disabled={state.retrying}
>
{state.retrying ? 'Retrying...' : 'Retry'}
</button>
)}
</div>
);
}
Example 4: Action Queue
function ActionQueue() {
const state = useActionState();
return (
<div>
<h3>Pending Actions</h3>
{state.queue.map((action, index) => (
<div key={index}>
{action.type} - Queued at {action.queuedAt}
<button onClick={() => action.cancel()}>Cancel</button>
</div>
))}
</div>
);
}
Example 5: Action Statistics
function ActionStats() {
const state = useActionState();
return (
<div>
<h3>Action Statistics</h3>
<p>Success Rate: {state.stats.successRate}%</p>
<p>Average Duration: {state.stats.avgDuration}ms</p>
<p>Total Actions: {state.stats.total}</p>
</div>
);
}
useOptimistic: Smooth UI Updates
The useOptimistic hook enables immediate UI updates while waiting for server responses, creating a more responsive user experience.
Example 1: Optimistic Todo List
function TodoList() {
const [todos, setTodos] = useState([]);
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo) => [...state, newTodo]
);
async function addTodo(formData) {
const newTodo = {
id: Date.now(),
text: formData.get('todo'),
completed: false
};
addOptimisticTodo(newTodo);
await saveTodo(newTodo);
}
return (
<div>
<form action={addTodo}>
<input name="todo" />
<button type="submit">Add Todo</button>
</form>
<ul>
{optimisticTodos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}
Example 2: Optimistic Like Button
function LikeButton({ postId, initialLikes }) {
const [likes, setLikes] = useState(initialLikes);
const [optimisticLikes, addOptimisticLike] = useOptimistic(
likes,
(state) => state + 1
);
async function handleLike() {
addOptimisticLike();
await likePost(postId);
}
return (
<button onClick={handleLike}>
{optimisticLikes} Likes
</button>
);
}
Example 3: Optimistic Comment Thread
function CommentThread({ postId }) {
const [comments, setComments] = useState([]);
const [optimisticComments, addOptimisticComment] = useOptimistic(
comments,
(state, newComment) => [...state, newComment]
);
async function submitComment(formData) {
const comment = {
id: Date.now(),
text: formData.get('comment'),
pending: true
};
addOptimisticComment(comment);
await saveComment(postId, comment);
}
return (
<div>
<form action={submitComment}>
<textarea name="comment" />
<button type="submit">Comment</button>
</form>
{optimisticComments.map(comment => (
<div key={comment.id} style={{ opacity: comment.pending ? 0.5 : 1 }}>
{comment.text}
</div>
))}
</div>
);
}
Example 4: Optimistic Shopping Cart
function ShoppingCart() {
const [cart, setCart] = useState([]);
const [optimisticCart, updateOptimisticCart] = useOptimistic(
cart,
(state, update) => {
const { type, item } = update;
switch (type) {
case 'add':
return [...state, item];
case 'remove':
return state.filter(i => i.id !== item.id);
case 'update':
return state.map(i => i.id === item.id ? item : i);
default:
return state;
}
}
);
async function updateCart(type, item) {
updateOptimisticCart({ type, item });
await saveCart({ type, item });
}
return (
<div>
{optimisticCart.map(item => (
<div key={item.id}>
{item.name} - ${item.price}
<button onClick={() => updateCart('remove', item)}>Remove</button>
</div>
))}
</div>
);
}
Example 5: Optimistic User Settings
function UserSettings() {
const [settings, setSettings] = useState({});
const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
settings,
(state, update) => ({
...state,
[update.key]: update.value
})
);
async function updateSetting(key, value) {
updateOptimisticSetting({ key, value });
await saveSettings({ [key]: value });
}
return (
<div>
<div>
<label>
Theme:
<select
value={optimisticSettings.theme}
onChange={e => updateSetting('theme', e.target.value)}
>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</label>
</div>
<div>
<label>
Notifications:
<input
type="checkbox"
checked={optimisticSettings.notifications}
onChange={e => updateSetting('notifications', e.target.checked)}
/>
</label>
</div>
</div>
);
}
Remember to check the official React documentation for the most up-to-date information and best practices when using these hooks in your applications.
Happy Coding!