Senior LevelReact JS & React 19
How do you manage server validation errors and field-level feedback with useActionState in React 19?
❓ Interview Prompt: Explain React 19 `useActionState` error handling, returning field-level validation errors from Server Actions, and displaying UI feedback.
Handling server validation errors with React 19 'useActionState':
Error State Pattern:
Server Actions return structured error objects ('{ success: false, errors: { email: 'Invalid' } }'). 'useActionState' captures this returned payload, allowing components to render inline field errors cleanly.
Code Implementation Example
jsx
async function signupAction(prevState, formData) {
'use server';
const email = formData.get('email');
if (!email.includes('@')) {
return { errors: { email: 'Invalid email address' } };
}
return { success: true };
}
function SignupForm() {
const [state, formAction, isPending] = useActionState(signupAction, null);
return (
<form action={formAction}>
<input name="email" />
{state?.errors?.email && <p className="error">{state.errors.email}</p>}
<button disabled={isPending}>Sign Up</button>
</form>
);
}💡Handling field-level server validation errors with useActionState.
🎯 Interview Key Takeaway
Return structured error objects from Server Actions to render inline field validation errors via useActionState.
#useActionState#React 19#Validation#Form Errors#Senior
Back to all React JS & React 19 Questions→