react-hook-form で制御コンポーネントと非制御コンポーネントの使いわけ

React でフォーム実装するとき react-hook-form を使うケースが多いと思いますが、
制御コンポーネントと非制御コンポーネントの扱い方について、
実際にコードを書いてみて、どちらを使うべきかを考えてみました。

制御コンポーネント

制御コンポーネントは、その状態（値）を React の state や props で明示的に制御するコンポーネントのことを指します。

特徴：

• ステートが React の中で完全に管理される
• 複数の入力要素の状態を一元的に管理しやすい
• バリデーションが簡単
• フォームの値を取得するのが簡単
• 再描画が発生するためパフォーマンスが非制御と比べると比較的悪い

sample code:

import { useForm } from "react-hook-form";

function ControlledComponentForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="username" ref={register} />
      <input type="submit" value="Submit" />
    </form>
  );
}

非制御コンポーネント

非制御コンポーネントは、その状態（値）を React の state や props で明示的に制御しないコンポーネントのことを指します。

特徴：

• React のステートを経由せずに、DOM から直接値を取得する
• ステートの変更時に再レンダリングされないのでパフォーマンスが良い
• 複数の入力要素の状態を一元的に管理しにくい
• バリデーションがカスタムしにくい

sample code:

import { useForm } from "react-hook-form";

function UncontrolledComponentForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="username" defaultValue="defaultName" ref={register} />
      <input type="submit" value="Submit" />
    </form>
  );
}

使いわけ

パフォーマンス:

初期レンダリングが多くのコンポーネントを含む大きなフォームの場合、非制御コンポーネントのほうがパフォーマンスが良い。

状態管理：

ユーザーのインタラクションに応じて入力値を動的に変更する場合は、制御コンポーネントを使用する開発がしやすい。

まとめ

react-hook-form を使用すると、制御コンポーネントと非制御コンポーネントの両方のアプローチでフォームを簡単に作成できます。
プロジェクトの要件に応じて最適な方法を選択しましょう。