useActionData

Detailed Explanation

useActionData is a React Router Hook that lets your Component access the data returned by the route's action Function after a form submission.

When a user submits a Form, React Router calls the action function. The action processes the form data, sends it to the Database (like Supabase), and returns a response — either a success message or an error. Inside your component, useActionData() gives you access to that response.

import { useActionData, Form } from 'react-router-dom';

export default function NewPostPage() {
  const actionData = useActionData();
  return (
    <Form method="post">
      {actionData?.error && <p className="error">{actionData.error}</p>}
      <input name="title" />
      <button type="submit">Create Post</button>
    </Form>
  );
}

The most common pattern is using useActionData to display Validation errors. When the action detects invalid input (like an empty title), it returns { error: "Title is required" }. Your component checks for this and displays the message without leaving the page.

useActionData returns undefined until the first form submission, so always use optional chaining (actionData?.error) to avoid crashes.