Rules
no-use-form-state
Full Name in eslint-plugin-react-dom
react-dom/no-use-form-stateFull Name in @eslint-react/eslint-plugin
@eslint-react/dom/no-use-form-stateFeatures
🔄
Presets
domrecommendedrecommended-typescriptrecommended-type-checked
Description
Replaces usages of useFormState with useActionState.
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>
);
}