no-use-form-state

Full Name in eslint-plugin-react-dom

react-dom/no-use-form-state

Full Name in @eslint-react/eslint-plugin

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

Features

🔄

Presets

dom recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Common Violations

Invalid

import { useFormState } from "react-dom";

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

function StatefulForm({}) {
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

Valid

import { useActionState } from "react";

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

function StatefulForm({}) {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page