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

てんハロ運営者 — Sat, 14 Jun 2025 03:20:49 +0000

でじぼうです。

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

でじぼう

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

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

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

F12で開く開発者ツール（DevTools）の使い方｜初心者でもできるエラー調査と表示確認

F12キーで開く開発者ツール（DevTools）の使い方を初心者向けに解説。HTML/CSSの確認、API通信、エラー調査の基本がまるっとわかります。

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

      名前: {name}
      メール: {email}
      年齢: {age}
    
  );
}

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 (
    
       type="text" placeholder="名前" {...register("name")} />
       type="email" placeholder="メールアドレス" {...register("email")} />
       type="number" placeholder="年齢" {...register("age", { valueAsNumber: true })} />

      名前: {name}
      メール: {email}
      年齢: {age}
    
  );
}

export default ProfileForm;

使用上の注意点

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

useState と watch の違い【比較表】

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

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