useFormのすすめ

useForm使おうという記事（もちろん時と場合によるのでメリデメ比較して判断）

素のstate管理をする書き方と比較して、いいところわるいところ

いいところ

1. unControlledなので変更のたびに描画されない（パフォーマンス面で優位）。
2. unControlledなのでdefault値とformの型が一致している必要がない。
3. シンプルな画面であれば記述量は最小限で済む（項目ごとのonChangeとか型の違いによるデータの入れ替えとかがいらない）。

わるいところ

1. すごい丁寧なUIには向かない（例えば文字入力するたびにメッセージを表示するようなやつ。validationはフォームのsubmitの時に実施される）
2. ちょっとライブラリ使おうとすると結局素のReactっぽい書き方しないといけない（setValueとか使う必要がある）

上記を踏まえ私なりの結論

・基本useFormを使うでいい。
なぜならば
・管理画面なのですごい親切でインタラクティブなUIが求められるわけではない
・少しでも記述量を減らしたい

コード比較

ここでは例としてユーザー名を更新するプログラムを想定。
実際に動かしてないのでコピペして動くことは保証しない。雰囲気が分かれば。

まずはuseFormを使わない書き方（普通のState管理）

const [user, setUser] = useState<UserOutput>();
useEffect(() => {
  fetchApi.get(userId).then((res) => {
    setData(res);
  });
}, []);

const handleSubmit = () => {
  const updDate: UpdateData = {
    id: user.id,
    name: user.name
  }
  updateApi.update(updDate).then((res) =>{
    // 更新後の処理
  })
}
<Form onSubmit={handleSubmit}>
<Form.Label>ユーザーID</Form.Label>
<Form.Control
 type="text"
 disabled
 value={user.id}
 }
/>
<Form.Label>ユーザー名</Form.Label>
<Form.Control
 type="text"
 value={user.name}
 onChange={(e) =>
 setUser((prevState) => ({
 ...prevState,
 name: e.target.value,
 }))
 }
/>
</Form>

useFormを使う書き方

// userはstate管理いらないかも（普通にfetchしてそれをdefaultに入れても動くかも）
const [user, setUser] = useState<UserOutput>();
useEffect(() => {
  fetchApi.get(userId).then((res) => {
    setData(res);
  });
}, []);
const {
    register,
    handleSubmit,
    formState: { errors },
} = useForm<UpdateData>({
    defaultValues: user,
});
const onSubmit = (data) => {
  // dataにはuseFormで指定した型のデータが入ってる
  updateApi.update(data).then((res) =>{
    // 更新後の処理
  })
}
  
<Form onSubmit={handleSubmit(onSubmit)}>
<Form.Label>ユーザーID</Form.Label>
<Form.Control
 type="text"
 disabled
 {...register('id')}
 }
/>
<Form.Label>ユーザー名</Form.Label>
<Form.Control
 type="text"
 {...register('name')}
 }
/>
</Form>