useStateとwatchの違いとは？フォーム入力の管理方法を解説！

でじぼうです。

Reactでフォームを扱うときに、よく登場するのが「useState」と「watch」という言葉。
どちらも値の変化を扱うための機能ですが、意味や使い方は少し違います。

でじぼう

この記事は下記の方がおすすめ！

useStateってなに？
wacthってなに？
useStateとwatchの違いとは？

Instagramフォロワー数9,500人を越える人気のもち・大福店えにかいたもち

F12キーで見るWebの裏側｜開発者ツール（DevTools）完全ガイド

F12キーで開くDevToolsの使い方を解説。HTML/CSSの確認からAPI通信、表示速度、SEO診断等はどこを見ればいいのかを解説します。

useStateについて
watchについて
useState と watch の違い【比較表】
結局どっちを使うべき？

useStateについて

useStateとは？

Reactに標準で用意されている 状態を保持・管理するための関数 です。
フォームの入力値やボタンのカウントなど、変化する値を保持できます。

どんなときに使う？

入力フォームの値をリアルタイムで表示したいとき
入力に応じて画面の動きを変えたいとき（例：ボタンの活性化・非表示切替など）

実際のコード

import { useState } from "react";

function ProfileForm() {
  const [name, setName] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [age, setAge] = useState<number | undefined>(undefined);

  return (
    <div>
      <input
        type="text"
        placeholder="名前"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="メールアドレス"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="number"
        placeholder="年齢"
        value={age ?? ""}
        onChange={(e) => setAge(Number(e.target.value))}
      />

      <p>名前: {name}</p>
      <p>メール: {email}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

export default ProfileForm;

使用上の注意点

値の更新はすべて自分で onChange を書く必要がある
入力項目が多くなると useState の数も増える

watchについて

watchとは？

watch は、React Hook Form というフォーム管理ライブラリの関数で、フォームの入力値をリアルタイムで「監視」できます。

watch は React に標準で含まれているわけではありません。
使うには、まず下記コマンドで React Hook Form を別途インストールする必要があります。

npm install react-hook-form

どんなときに使う？

フォームの入力値を簡単に取り出したいとき
複数のフォーム項目をまとめて管理したいとき
バリデーションや送信処理もラクにしたいとき

実際のコード

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

type FormData = {
  name: string;
  email: string;
  age: number | undefined;
};

function ProfileForm() {
  const { register, watch } = useForm<FormData>({
    defaultValues: {
      name: "",
      email: "",
      age: undefined,
    },
  });

  const { name, email, age } = watch();

  return (
    <div>
      <input type="text" placeholder="名前" {...register("name")} />
      <input type="email" placeholder="メールアドレス" {...register("email")} />
      <input type="number" placeholder="年齢" {...register("age", { valueAsNumber: true })} />

      <p>名前: {name}</p>
      <p>メール: {email}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

export default ProfileForm;

使用上の注意点

React Hook Form の register とのセットが必要
初期値が指定されていないと undefined になることがある

useState と watch の違い【比較表】

下記に、useState と watch の違いをまとめました。

項目	useState	watch
用途	値の保存と更新	入力値のリアルタイム監視
更新方法	自分で `onChange` を書く	自動で監視される
導入のしやすさ	標準のReactで使える	ライブラリのインストールが必要
向いている規模	小規模なフォーム	項目数が多いフォーム
型管理（TypeScript）	一つずつ型を指定	`useForm<FormData>()`で一括管理