React 19: フォームを操作するための新しいツール

この記事では、開発者がフォーム処理で直面する一般的な課題と、React 19が導入した待望のツールについて解説します。これらのツールにより、フォーム処理がよりクリーンで宣言的になり、エラーが発生しにくくなります。

過去6年間のフロントエンド開発において—複雑なフォームシステムの構築からSDGでのAIツールの統合まで—私は認めたくないほど多くのフォームコードを書き、デバッグし、リファクタリングしてきました。

もしあなたがReactでフォームを構築または保守した経験があるなら、おそらくその気持ちを共有しているでしょう。フォームは一見シンプルに見えますが...実際はそうではありません。

この記事では、開発者がフォーム処理で直面する一般的な課題と、React 19が導入した待望のツールについて解説します。これらのツールにより、フォーム処理がよりクリーンで宣言的になり、エラーが発生しにくくなります。✨

フォーム処理における一般的な課題

🔍 まずは、すべてのReact開発者が少なくとも一度は直面した問題点から始めましょう。

1. 至る所にボイラープレートコード

Reactでフォームの状態を管理する場合、通常はこのように始まります：

const [name, setName] = useState(''); const [surname, setSurname] = useState(''); const [error, setError] = useState(null); function handleSubmit(event) { event.preventDefault(); }

✅ シンプルで、小さなフォームには十分です。

しかし規模が大きくなると、繰り返しの状態フック、手動リセット、そして無限のevent.preventDefault()呼び出しに溺れることになります。

キーストロークごとに再レンダリングがトリガーされ、エラーや保留状態を管理するにはさらに多くの状態変数が必要になります。機能的ではありますが、エレガントとは程遠いです。

2. プロップスドリリング

フォームが単一のコンポーネントではなく、ネストされたコンポーネントの階層である場合、すべてのレベルを通じてプロップスを渡すことになります：

<Form> <Field error={error} value={name} <Input /> </Field> </Form>

状態、エラー、ローディングフラグ—すべてが複数の層を通じて渡されます。📉 これはコードを膨らませるだけでなく、メンテナンスやリファクタリングを苦痛にします。😓

3. 楽観的更新は難しい

楽観的更新を手動で実装しようとしたことはありますか？

これは、サーバーが実際に確認する前に、ユーザーアクションの直後にUIに「成功」の変更を表示することです。

簡単に聞こえますが、リクエストが失敗した場合のロールバックロジックの管理は本当に頭痛の種になります。🤕

一時的な楽観的状態をどこに保存しますか？どのようにマージしてからロールバックしますか？🔄

React 19はこれに対してはるかにクリーンなソリューションを導入しています。

useActionState: フォーム送信を処理する新しい方法

React 19で最も興奮する追加機能の1つは、==*useActionState*==フックです。

非同期フォーム送信、状態管理、ローディング表示を1つの場所に組み合わせることで、フォームロジックを簡素化します。🎯

const [state, actionFunction, isPending] = useActionState(fn, initialState);

ここで何が起こっているかを説明します：

• ==fn==—フォーム送信を処理する非同期関数

• ==initialState==—フォーム状態の初期値

• ==isPending==—送信が進行中かどうかを示す組み込みフラグ

  \

仕組み

==useActionState==に渡される非同期関数は、自動的に2つの引数を受け取ります：

const action = async (previousState, formData) => { const message = formData.get('message'); try { await sendMessage(message); return { success: true, error: null }; } catch (error) { return { success: false, error }; } };

そして、次のようにフォームにフックします：

const [state, actionFunction, isPending] = useActionState(action, { success: false, error: null, }); return <form action={actionFunction}> ... </form>;

フォームが送信されると、Reactは自動的に：

• 非同期==action==を呼び出します
• 返された結果で**==*state*==**を更新します
• ==isPending==を通じて送信プロセスを追跡します

もう手動の==useState, preventDefault,==やリセットロジックは必要ありません—Reactがすべてを処理します。⚙️

startTransitionに関する注意

フォームアクションを手動でトリガーする場合（例：フォームのactionプロップの外部）、==startTransition==でラップしてください：

const handleSubmit = async (formData) => { await doSomething(); startTransition(() => { actionFunction(formData); }); };

そうしないと、Reactは遷移の外部で非同期更新が発生したことを警告し、==isPending==が適切に更新されません。

useActionStateを気に入る理由

• ✅ 複数の==*useState*==フックが不要
• ✅ 自動保留状態（==isPending==）
• ✅ ==event.preventDefault==()が不要
• ✅ 送信成功後の自動フォームリセット

フォームロジックが再び宣言的に感じられます—配線ではなく、アクションを記述するだけです。

useFormStatus: プロップスドリリングの解消

もう一つの強力な新しいフック—==useFormStatus==—は、フォームツリーでのプロップスドリリングの問題を解決します。

import { useFormStatus } from 'react-dom'; const { pending, data, method, action } = useFormStatus();

このフックはフォームの任意の子コンポーネント内で呼び出すことができ、自動的に親フォームの状態に接続します。

例

function SubmitButton() { const { pending, data } = useFormStatus(); const message = data ? data.get('message') : ''; return ( <button type="submit" disabled={pending}> {pending ? `Sending ${message}...` : 'Send'} </button> ); } function MessageForm() { return ( <form action={submitMessage}> <SubmitButton /> </form> ); }

:::info ==SubmitButton==がプロップスを渡さずにフォームのデータと保留状態にアクセスできることに注目してください。

:::

覚えておくべき注意点

• ❌ フォームがレンダリングされる同じコンポーネント内で呼び出すと機能しません。子コンポーネント内にある必要があります。
• ❌ onSubmitハンドラーを使用するフォームには反応しません—***action***プロップを持つフォームである必要があります。
• ⚠️ 現時点では、ボタンや入力内のformMethodオーバーライド（例：formMethod="get"）は期待通りに機能しません—フォームは依然としてメインメソッドを使用します。 🐛 このバグを追跡するためにGitHubでissueを開きました。

useFormStatusが重要な理由

🧩 フォームツリーでのプロップスドリリングを排除します ⚡ 子コンポーネント内でのコンテキスト依存の決定を可能にします 💡 コンポーネントを分離してよりクリーンに保ちます

useOptimistic: 宣言的な楽観的UI

最後に、私のお気に入りの追加機能の1つについて話しましょう—==useOptimistic==。

楽観的UIアップデートの組み込みサポートを提供し、ユーザーインタラクションを即時かつスムーズに感じさせます。

問題

「お気に入りに追加」をクリックすることを想像してください。サーバーの応答を待たずに、すぐに更新を表示したいと思います。

従来は、ローカル状態、ロールバックロジック、非同期リクエストの間でやりくりする必要がありました。

解決策

==useOptimistic==を使用すると、宣言的かつ最小限になります：

const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages, (state, newMessage) => [newMessage, ...state] ); const formAction = async (formData) => { addOptimisticMessage(formData.get('message')); try { await sendMessage(formData); } catch { console.error('Failed to send message'); } };

サーバーリクエストが失敗した場合、Reactは自動的に以前の状態にロールバックします。

成功した場合—楽観的な変更は維持されます。

重要なルール：変更しないでください

useOptimisticに渡す更新関数は純粋である必要があります：

❌ 間違い：

(prev, newTodo) => { prev.push(newTodo); return prev; }

✅ 正解：

(prev, newTodo) => [...prev, newTodo];

:::tip 常に新しい状態オブジェクトまたは配列を返してください！

:::

startTransitionとの使用

フォームのactionの外部で楽観的更新をトリガー