【要約】【React】フォームにonChangeもvalueも不要！全てuseActionStateで解決する [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
React開発者が、多数の入力項目を持つフォームを実装する際に直面する、コードの肥大化と管理の複雑さについて述べている。従来の制御コンポーネント方式では、以下の問題が発生していた。
- ・各入力項目ごとに
useState、onChangeハンドラ、valueプロパティを定義する必要がある。 - ・フォームの項目が増えるほど、ステート管理と同期処理の記述が冗長になり、保守性が低下する。
- ・非同期通信中のローディング状態（Pending状態）を管理するために、別途ステートを用意する手間が生じる。
// Approach
開発者は、
useActionState フックを導入することで、フォームの制御を「ステート同期型」から「アクション駆動型」へと転換する。- ・
useActionState(action, initialState)を用い、フォームの処理結果、アクション関数、およびisPendingフラグを一括管理する。 - ・
input要素からonChangeやvalueを排除し、HTML標準のname属性とdefaultValueを利用して実装する。 - ・フォーム送信時には
formDataオブジェクトから値を一括取得し、アクション関数内で一括して状態を更新する。
// Result
この手法の採用により、開発者はフォーム実装におけるボイラープレートコードを劇的に削減できる。
- ・
onChangeやuseStateの記述が不要になり、フォームの項目数に依存しない簡潔なコード記述が可能となる。 - ・
isPendingフラグにより、通信中のUI制御（ボタンの無効化やメッセージ表示）が極めて容易になる。 - ・
formData.entries()を用いたループ処理により、動的なフォーム項目への対応も容易になる。
Senior Engineer Insight
> フォーム制御のパラダイムシフトとして高く評価できる。従来の「一文字ごとのステート同期」から「送信時のデータ一括処理」への移行は、Reactの宣言的な性質を活かしつつ、コード量を大幅に削減する。ただし、記事内で指摘されている「戻り値のオブジェクト分割によるisPendingの不具合」は、Reactの内部的な状態更新メカニズムに依存している可能性が高い。実戦投入時には、ライブラリの挙動を深く理解した上で、副作用のない状態更新を徹底すべきである。