Керування станом дії через useActionState

async function action(formData) {
  "use server";

  // ...
}

async function action(previousState, formData) {
  "use server";

  // ...
}

app/
└── contact/
    ├── actions.ts
    ├── contact-form.tsx
    └── page.tsx

"use server";

export type FormState = {
  message: string;
  errors?: {
    email?: string;
    text?: string;
  };
};

export async function sendMessage(
  previousState: FormState,
  formData: FormData
): Promise<FormState> {
  const emailValue = formData.get("email");
  const textValue = formData.get("text");

  const email = typeof emailValue === "string" ? emailValue.trim() : "";
  const text = typeof textValue === "string" ? textValue.trim() : "";

  const errors: FormState["errors"] = {};

  if (!email) {
    errors.email = "Введіть електронну пошту.";
  } else if (!email.includes("@")) {
    errors.email = "Введіть коректну електронну пошту.";
  }

  if (!text) {
    errors.text = "Введіть повідомлення.";
  } else if (text.length < 10) {
    errors.text = "Повідомлення має містити щонайменше 10 символів.";
  }

  if (Object.keys(errors).length > 0) {
    return {
      message: "Перевірте дані форми.",
      errors,
    };
  }

  // Тут могла б бути операція з базою даних або надсилання електронного листа.
  console.log("Нове повідомлення:", { email, text });

  return {
    message: "Повідомлення успішно надіслано.",
  };
}

"use client";

import { useActionState } from "react";
import { sendMessage, type FormState } from "./actions";

const initialState: FormState = {
  message: "",
};

export default function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    sendMessage,
    initialState
  );

  return (
    <form action={formAction}>
      <div>
        <label htmlFor="email">Електронна пошта</label>

        <input
          id="email"
          name="email"
          type="email"
          aria-invalid={Boolean(state.errors?.email)}
          aria-describedby={state.errors?.email ? "email-error" : undefined}
          disabled={isPending}
        />

        {state.errors?.email && (
          <p id="email-error" role="alert">
            {state.errors.email}
          </p>
        )}
      </div>

      <div>
        <label htmlFor="text">Повідомлення</label>

        <textarea
          id="text"
          name="text"
          rows={5}
          aria-invalid={Boolean(state.errors?.text)}
          aria-describedby={state.errors?.text ? "text-error" : undefined}
          disabled={isPending}
        />

        {state.errors?.text && (
          <p id="text-error" role="alert">
            {state.errors.text}
          </p>
        )}
      </div>

      <button type="submit" disabled={isPending}>
        {isPending ? "Надсилання..." : "Надіслати"}
      </button>

      {state.message && (
        <p aria-live="polite">
          {state.message}
        </p>
      )}
    </form>
  );
}

<form action={formAction}>

import ContactForm from "./contact-form";

export default function ContactPage() {
  return (
    <main>
      <h1>Зворотний зв’язок</h1>
      <ContactForm />
    </main>
  );
}

{
  message: "Перевірте дані форми.",
  errors: {
    email: "Введіть електронну пошту.",
    text: "Введіть повідомлення."
  }
}

state.message
state.errors?.email
state.errors?.text

{
  message: "Повідомлення успішно надіслано."
}

"use server";

type FormState = {
  attempts: number;
  message: string;
};

export async function checkCode(
  previousState: FormState,
  formData: FormData
): Promise<FormState> {
  const code = formData.get("code");

  if (code !== "1234") {
    return {
      attempts: previousState.attempts + 1,
      message: "Неправильний код.",
    };
  }

  return {
    attempts: previousState.attempts,
    message: "Код правильний.",
  };
}

return {
  message: "Виправте помилки у формі.",
  errors: {
    email: "Електронна пошта вже використовується.",
  },
};

export async function sendMessage(
  formData: FormData,
  previousState: FormState
) {
  "use server";
}

export async function sendMessage(
  previousState: FormState,
  formData: FormData
) {
  "use server";
}

const [state, formAction] = useActionState(sendMessage, initialState);

<form action={sendMessage}>

<form action={formAction}>

"use client";

<input name="email" />
<textarea name="text" />

// Неправильно
return {
  message: new Error("Помилка"),
};

return {
  message: "Сталася помилка.",
};