useActionData for response handling in Remix

Introduction

useActionData helps you get the response data from a form submission or action in Remix. It lets your component show messages or results after you send data.

You want to show a success or error message after a form is submitted.

You need to display validation errors returned from the server after a user submits a form.

You want to update part of the page based on the result of an action without a full page reload.

You want to keep the user on the same page but show feedback after sending data.

Syntax

Remix

const actionData = useActionData();

useActionData returns the data your action function sends back.

If no action has run yet, it returns null.

Examples

Check if there is an error message from the action and show it.

Remix

const actionData = useActionData();

if (actionData?.error) {
  return <p>Error: {actionData.error}</p>;
}

Show a message from the action or a default prompt.

Remix

const actionData = useActionData();

return <p>{actionData?.message ?? 'Fill the form and submit.'}</p>;

Sample Program

This component shows a form asking for your name. When you submit, the action checks if you entered a name. If not, it returns an error. If yes, it returns a greeting message. The component uses useActionData to get this response and show it below the form.

Remix

import { useActionData, Form } from '@remix-run/react';

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');

  if (!name) {
    return { error: 'Name is required' };
  }

  return { message: `Hello, ${name}!` };
}

export default function GreetingForm() {
  const actionData = useActionData();

  return (
    <div>
      <Form method="post" aria-label="Greeting form">
        <label htmlFor="name">Name:</label>
        <input id="name" name="name" type="text" aria-required="true" />
        <button type="submit">Greet me</button>
      </Form>

      {actionData?.error && <p role="alert" style={{ color: 'red' }}>{actionData.error}</p>}
      {actionData?.message && <p role="status" style={{ color: 'green' }}>{actionData.message}</p>}
    </div>
  );
}

Important Notes

Remember to use aria-label and roles like role="alert" for accessibility when showing messages.

useActionData only works after a form submission or action call on the same route.

It helps keep the page from fully reloading and improves user experience.

Summary

useActionData gets the response from your action function after a form submits.

Use it to show errors or success messages without leaving the page.

It makes your app feel faster and friendlier by updating only what changed.