ReactでカスタムHooksを使って状態管理をスマートにする

Reactにおいて状態管理をするには、Hooksを使うのが一般的です。しかし、コンポーネント内でHooksを利用しすぎると、可読性や保守性が低下する可能性があります。そこで、今回はカスタムHooksを使って状態管理をスマートにする方法について紹介します。

1. カスタムHooksとは

カスタムHooksとは、複数のコンポーネントで共通する処理を関数化して再利用できるようにするReactの機能です。例えば、APIからデータを取得する処理や、フォームの入力値を管理する処理などが挙げられます。

2. カスタムHooksの作成方法

カスタムHooksを作成するには、以下のような手順が必要です。

2.1. Hooksの作成

まず、Hooksを作成します。以下は、フォームの入力値を管理するHooksの例です。

import { useState } from "react";

export const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return { value, onChange: handleChange };
};

このHooksは、初期値を受け取り、現在の値と値の変更関数を返します。

2.2. Hooksの利用

次に、作成したHooksを利用するコンポーネントでimportします。

import { useFormInput } from "./useFormInput";

const MyComponent = () => {
  const name = useFormInput("");
  const email = useFormInput("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(name.value, email.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" {...name} />
      </label>
      <label>
        Email:
        <input type="text" {...email} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

このように、Hooksを利用することで、コンポーネント内での状態管理がシンプルになります。

3. カスタムHooksの利用例

最後に、カスタムHooksを利用した実際の例を紹介します。以下は、APIからデータを取得するHooksの例です。

import { useState, useEffect } from "react";

export const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () =>
{
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
    };

    fetchData();
  }, [url]);

  return data;
};

このHooksを利用することで、以下のようにAPIからデータを取得するコンポーネントをシンプルに実装できます。

import { useFetch } from "./useFetch";

const MyComponent = () => {
  const data = useFetch("https://example.com/api/data");

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{data}</div>;
};

まとめ

Reactにおいて、状態管理をする際には、カスタムHooksを利用することで、コンポーネント内での状態管理がシンプルになります。カスタムHooksを作成するには、Hooksの作成とHooksの利用の2つの手順が必要です。また、カスタムHooksを利用することで、APIからデータを取得するなどの共通処理を関数化して再利用できるようになります。是非、実際にカスタムHooksを使って、よりスマートな状態管理を実現してみてください。