＜useFormとは＞

フォーム入力と状態管理をまとめて面倒見てくれるライブラリ。これにより、useState,value,onChange,FormData,event,.preventDefaultが不要になる。

＜useFormの目的と機能（useStateとの違い）＞
いままで（useState）

const [email, setEmail] = useState('')

const [password, setPassword] = useState('')

<input

  value={email}

  onChange={(e) => setEmail(e.target.value)}

/>

→入力値の保持、onChangeの定義、フォーム送信時の値取得、バリデーション、エラー管理すべて主導で実装。
useFormを使うと
入力値の保持、onChangeの定義、フォーム送信時の値取得、バリデーション、エラー管理をuseFormが代行

＜useFormの主な機能＞

入力値の管理（useState不要）

const { register } = useForm()

<input {...register('email')} />

→name=”email”を自動付与、valueを内部で保持、onChangeを自動登録することで、useState完全不要になる。

submit時にデータをまとめて取得

const onSubmit = (data) => {

  console.log(data.email)

  console.log(data.password)

<form onSubmit={handleSubmit(onSubmit)} />

handleSubmit(onSubmit)

これは、

「フォーム送信イベントを横取りして、
入力値を全部集めてから onSubmit に渡す関数」

まず「普通のフォーム送信」では、

useForm を使わない場合

<form onSubmit={(e) => {
  e.preventDefault()

  const formData = new FormData(e.currentTarget)
  const email = formData.get('email')
  const password = formData.get('password')

  console.log(email, password)
}}>

自分でやっていること

submitイベントを受け取る
ページ遷移を止める
input を全部探す
name属性で値を取得
1つずつ取り出す

👉 めんどい＆毎回同じ

useForm を使うとどうなるか

Step① register が「名簿」を作る

<input {...register('email')} />
<input {...register('password')} />

これで useForm は内部的に↓を記憶

{
  email: '（今入力されている値）',
  password: '（今入力されている値）'
}

入力されるたびに、useFormが勝手に更新

Step② handleSubmit が「回収係」

<form onSubmit={handleSubmit(onSubmit)} />

ここで起きていること

フォームが submit される
handleSubmit が割り込む
preventDefault() を自動で実行
register された全 input の値を集める
↓こういうオブジェクトを作る

{
  email: 'aaa@example.com',
  password: '12345678'
}

その 完成品 を onSubmit に渡す

Step③ onSubmit は「完成品を受け取るだけ」

const onSubmit = (data) => {
  console.log(data.email)
  console.log(data.password)
}

→event も FormData も登場しない

全体の流れを図にすると

<input {...register('email')} />
<input {...register('password')} />

        ↓ 入力

useForm が内部で値を保持
        ↓

<form onSubmit={handleSubmit(onSubmit)} />

        ↓ submit

handleSubmit
  ├─ preventDefault
  ├─ 値を全部集める
  └─ onSubmit(data) を呼ぶ

        ↓

onSubmit({ email, password })

dataは、register で登録された input から来ている

バリデーション管理

<input {...register('email', { required: true })} />

<input {...register('password', { minLength: 6 })} />

エラー管理

const {

  formState: { errors }

} = useForm()

{errors.email && <p>必須です</p>}

→エラー用useState不要

reset（フォーム初期化）
reset()

＜useState vs useForm：メリデメ比較＞

観点	useState	useForm
入力管理	手動	自動
バリデーション	自作	標準対応
エラー管理	useState	errors
実装量	多い	少ない
可読性	低下しやすい	高い
学習コスト	低	中
実務適性	小規模	高い