1. Reactのコンポーネント再利用とは？

Reactでは、画面を小さな部品であるコンポーネントに分けて作ります。同じ見た目や同じ動きを何度も使う場合、毎回同じコードを書くのは大変です。そこで登場する考え方が「再利用」です。

再利用とは、一度作った部品や処理を、別の場所でも使い回すことです。例えるなら、毎回ゼロから料理を作るのではなく、作り置きのおかずを使うようなものです。 Reactでは、コンポーネントとカスタムフックを組み合わせることで、効率よく再利用ができます。

2. フックとは何かをやさしく理解しよう

フックとは、Reactに用意されている特別な関数の仕組みです。よく使われるものに useState や useEffect があります。これらを使うことで、状態の管理や画面の更新が簡単になります。

初心者の方は「フック＝便利な道具箱」だと思ってください。ボタンを押した回数を覚えたり、入力された文字を保存したりする役割があります。この仕組みを自分で作れるようにしたものが、カスタムフックです。

3. カスタムフックとは？

カスタムフックとは、自分で作るフックのことです。名前は必ず use から始めます。これにより、Reactがフックとして正しく扱ってくれます。

例えば、ボタンのクリック回数を管理する処理を、毎回コンポーネントに書くのは面倒です。その処理をまとめてカスタムフックにしておけば、必要な場所で呼び出すだけで使えます。

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

ここでは、数値を増やすだけの簡単なカスタムフックを作ります。初心者でも読みやすい内容なので、コードの流れを追ってみてください。


import { useState } from "react";

function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

export default useCounter;

（内部で数値を保存し、呼び出した側で現在の数と増やす処理を使えるようになります）

5. カスタムフックをコンポーネントで使う

次に、作成したカスタムフックをコンポーネントで使ってみます。コンポーネント側はとてもシンプルになり、見通しが良くなります。


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

function CounterButton() {
  const { count, increment } = useCounter();

  return (
    <div>
      <p>現在の数：{count}</p>
      <button onClick={increment}>増やす</button>
    </div>
  );
}

export default CounterButton;

（ボタンを押すたびに数値が1ずつ増えて表示されます）

6. 複数のコンポーネントで再利用する

カスタムフックの強みは、同じ処理を複数のコンポーネントで使える点です。別の場所でも同じフックを呼び出せば、それぞれ独立した状態を持てます。


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

function AnotherCounter() {
  const { count, increment } = useCounter();

  return (
    <div>
      <h3>別のカウンター</h3>
      <p>{count}</p>
      <button onClick={increment}>クリック</button>
    </div>
  );
}

export default AnotherCounter;

（2つのカウンターは互いに影響せず、それぞれ独立して動きます）

7. 入力フォーム処理をカスタムフックに分ける

カスタムフックは、入力フォームの管理にも向いています。文字の入力やリセット処理をまとめることで、コンポーネントがすっきりします。


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;

（入力された文字を保存し、変更時に自動で更新します）