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

Description

Replaces the usages of useFormState with useActionState.

An safe codemod is available for this rule.

Examples

Failing

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>
  );
}

Passing

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>
  );
}

Description

Examples

Failing

Passing

Implementation

Further Reading

On this page