Back
React
migration
byalexbit-codemod

React/19/Replace Use Form State

/icons/calendar.svg

Last update

Nov 11, 2024

This codemod will replace the usages of useFormState() to use useActionState(), introduced in React v19.

Example

Before:

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

After:

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

Before:

import * as ReactDOM from "react-dom";


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

After:

import { useActionState } from "react";


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

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

background illustrationGet Started Now