🐙
useFormのすすめ
useForm使おうという記事(もちろん時と場合によるのでメリデメ比較して判断)
素のstate管理をする書き方と比較して、いいところわるいところ
いいところ
- unControlledなので変更のたびに描画されない(パフォーマンス面で優位)。
- unControlledなのでdefault値とformの型が一致している必要がない。
- シンプルな画面であれば記述量は最小限で済む(項目ごとのonChangeとか型の違いによるデータの入れ替えとかがいらない)。
わるいところ
- すごい丁寧なUIには向かない(例えば文字入力するたびにメッセージを表示するようなやつ。validationはフォームのsubmitの時に実施される)
- ちょっとライブラリ使おうとすると結局素の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>
Discussion