Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.
Exercise 1 of 1
Three questions on React 19's useActionState — isPending semantics, how formAction receives data, and the advantage over manual fetch patterns.
const [state, formAction, isPending] = useActionState(
async (prevState, formData) => {
const name = formData.get('name');
const result = await saveName(name);
return result;
},
null // initial state
);What does isPending represent?
const [state, formAction] = useActionState(myAction, { error: null });
return (
<form action={formAction}>
<input name="email" />
<button type="submit">Submit</button>
{state.error && <p>{state.error}</p>}
</form>
);How does formAction receive the form data?
What is the main advantage of useActionState over a manual fetch + useState pattern?
0/3 answered
💡 useActionState is a React 19 hook that pairs with the action prop on forms. It replaces the boilerplate of loading/error/success state management for form submissions — and integrates seamlessly with React Server Actions.