no-use-form-state

react-dom/no-use-form-state

@eslint-react/dom-no-use-form-state

import { useFormState } from "react-dom";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  // Problem: useFormState from "react-dom" is deprecated in favor of useActionState
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  // Recommended: Use useActionState from "react" instead
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

// Recommended: Use useActionState to track pending state
import { useActionState } from "react";

async function addToCart(previousCount: number, formData: FormData) {
  // Simulate an async server action
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return previousCount + 1;
}

function Checkout() {
  const [count, dispatchAction, isPending] = useActionState(addToCart, 0);

  return (
    <div className="checkout">
      <h2>Checkout</h2>
      <div className="row">
        <span>Tickets</span>
        <span>Qty: {count}</span>
      </div>
      <button onClick={() => dispatchAction()} disabled={isPending}>
        Add Ticket{isPending ? " 🌀" : ""}
      </button>
    </div>
  );
}