conform で useActionState を利用するときの注意点
2026-01-03
14 days ago
開発環境
- next 16.0.3
- react 19.2.0
- react-dom 19.2.0
前提
- App Router 環境で Server Actions を利用している
- フォーム管理に conform を利用している
- フォーム送信に useActionState を使用している
本記事では、conform と useActionState を組み合わせた際に発生しやすい「フォームリセット」に関する注意点を扱います。
本題
問題の概要
conform で管理しているフォームを useActionState と組み合わせると、Server Action の実行後にフォームが意図せずリセットされる ことがあります。
これは useActionState が内部的に form の submit / reset イベントに強く依存している ためです。
特に以下のようなケースで問題が顕在化します。
- バリデーションエラーを表示したい
- 入力途中の値を保持したい
- サーバーエラー時にフォーム内容を維持したい
しかし、実際には submit 後に reset が発火し、conform 側の state が初期化されてしまいます。
暫定的な対処方法
現時点では conform 側で リセットイベントの挙動を阻止する hooks を使う 方法が、現実的な回避策とされています。
useEffect(() => {
const preventDefault = (event: Event) => {
// Make sure the reset event is dispatched on the corresponding form element
if (event.target === document.forms.namedItem(form.id)) {
// Tell Conform to ignore the form reset event
event.preventDefault();
}
};
document.addEventListener("reset", preventDefault, true);
return () => {
document.removeEventListener("reset", preventDefault, true);
};
}, [form.id]);注意点
この方法は あくまで暫定的 です。
- useActionState 自体がまだ新しい API である
- React / Next.js / conform 側の実装変更で挙動が変わる可能性がある
- 根本的な解決ではなく「イベントを止めている」だけ
という点は理解しておく必要があります。
そのため、
- フォームの UX が重要な箇所
- 入力保持が必須な管理画面や複雑なフォーム
では、導入前に十分な検証を行うことをおすすめします。
さいごに
conform × useActionState は非常に相性が良さそうに見えますが、現状では フォームリセットの挙動に注意が必要 です。
今回紹介したように、
- リセットイベントの挙動を阻止する hooks を活用する
- あくまで暫定対応であることを理解する
という前提で使うのが現実的です。
今後、ライブラリ側でより良い解決策が提供されることを期待しつつ、現時点では挙動を理解したうえで安全に運用することが重要です。