Multi-step Actions
Loading "Multi Step Actions"
Run locally for transcripts
π¨βπΌ Our submit button changes from "Create" to "Creating..." but our form action
actually has one more step: loading the newly created ship.
We want to update the message of our submit button to indicate which step we're
on in the process. But updating state during a transition (like that in our form
action) isn't possible. So we need to use
useOptimistic. Here's an example of
how you might do this:<form
action={async (formData) => {
setMessage('Creating order...')
const order = await createOrder(formData)
setMessage('Creating payment...')
const payment = await createPayment(formData, order)
setMessage('Almost done!')
await sendThankYou(order, payment)
}}
>
{/* ...*/}
</form>
So please add a
useOptimistic for a "message" variable which we'll use to
update the submit button message. You can initialize it to "Create" and then
update it in each step of our form action.