【フォーム自作】useFormState が使えずハマった → useActionState に変わっていた

はじめに

お問い合わせフォームを実装していたところ、以下のエラーに遭遇しました。

エラーメッセージ

ReactDOM.useFormState has been renamed to React.useActionState. Please update ContactForm to use React.useActionState.

「useFormState が使えない…？」と思って調べたところ、React の仕様変更だったので備忘録としてまとめます。

原因

React 19 系から、「Form専用」ではなく、「Server Action の state 管理」全般に使えるというフックという扱いに変わり、useFormState が非推奨となり、useActionState にリネームされたそうです。
import元もReactDOMパッケージからreactパッケージに移動され、これによりReact Nativeなどの任意のレンダラーで使用できるようになります。

修正内容

今回は単純なimport元の変更、リネームという内容だったので、以下コードを修正してエラーを解消致しました。

import元の変更

- import { useFormState } from "react-dom";
+ import { useActionState } from "react";

リネーム

- const [state, formAction] = useFormState(action, initialState);
+ const [state, formAction] = useActionState(action, initialState);

まとめ

• useFormState は最新版では使えない、useActionState が正式な後継
• import 元は react

参照