1. Reactのフォーム管理が難しく感じる理由

Reactのフォーム処理では、入力された文字や数字を状態として管理します。状態とは、画面の今の情報を覚えておく箱のようなものです。

入力欄が一つなら簡単ですが、名前やメールアドレスなどが増えると、状態の管理が複雑になります。その結果、同じようなコードを何度も書くことになります。

2. カスタムフックとは何かをやさしく解説

カスタムフックとは、自分で作れる特別な関数です。 Reactに元から用意されているフックを組み合わせて使います。

例えるなら、毎回料理を一から作るのではなく、下ごしらえ済みのセットを用意するようなものです。よく使う処理をまとめることで、コードがすっきりします。

3. useStateだけでフォーム管理する例

まずは、カスタムフックを使わない基本的なフォーム管理を見てみます。これは初心者が最初につまずきやすい形です。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>{name}</p>
    </div>
  );
}

export default App;

（入力した文字がそのまま画面に表示されます）

入力欄が増えるたびに、このような状態と処理を追加する必要があります。

4. シンプルなカスタムフックを作ってみよう

次に、入力管理をまとめたカスタムフックを作ります。これにより、フォーム処理を一か所に集められます。


import { useState } from "react";

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return { value, onChange };
}

export default useInput;

このカスタムフックは、入力の値と変更処理をまとめて返しています。難しそうに見えますが、よく使う処理を一つにしただけです。

5. カスタムフックを使ったフォーム管理の実例

作成したカスタムフックを、フォームで使ってみます。コードが短くなり、読みやすくなります。


import React from "react";
import useInput from "./useInput";

function App() {
  const name = useInput("");

  return (
    <div>
      <input {...name} />
      <p>{name.value}</p>
    </div>
  );
}

export default App;

（入力内容が表示され、動きは先ほどと同じです）

同じ仕組みを、他の入力欄でも使い回せるようになりました。

6. 複数入力をまとめて管理するカスタムフック

フォームが増えると、複数の入力をまとめて扱いたくなります。その場合は、オブジェクトで状態を管理します。


import { useState } from "react";

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value,
    });
  };

  return { values, handleChange };
}

export default useForm;

name属性を使うことで、どの入力が変更されたかを判断しています。 nameは入力欄の名札のようなものです。