カスタムフックス

カスタムフックスとは、コンポーネントのロジック部分を切り出し関数化する手法です。カスタムフックスを使うことで、ロジックを分けることができ、同じロジックを別のところで使い回すことができます。

src配下にhooksディレクトリを作成しましょう。その中にusePostList.tsを作成しましょう。カスタムフックスの命名は基本的にuse~としましょう。usePostList.ts内にはusePostListという関数を定義しましょう。

usePostList.ts◎

export const usePostList = () => {}

この関数の中に、PostList.tsxのロジック部分を移行しましょう。

usePostList.ts◎

import axios from "axios";
import { useEffect, useState } from "react";

type Post = {
  id: number;
  userId: number;
  title: string;
  body: string;
};

export const usePostList = () => {
  const [postList, setPostList] = useState<Post[]>([]);
  const [userId, setUserId] = useState(1);
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    axios
      .get<Post[]>("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        setPostList(res.data);
      })
      .catch((e) => {
        setErrorMessage(e.message);
      });
  }, []);
};

そして、この関数の返却値として、PostList.tsxで使用するstateや関数を返却するようにします。

usePostList.ts◎

... 
  }, []);

  return {
    postList,
    userId,
    errorMessage,
    setUserId,
  };
};

上記にて作成したフックスを呼び出します。上記を呼び出すには、const { ... } = usePostList()と呼び出すことで、stateや関数を取得することができます。

ですので、PostList.tsxのロジック部分と不要なインポートを削除して、usePostList()を呼び出します。最終的には以下のような形になります。

PostList.tsx◎

import { usePostList } from "../hooks/usePostList";

export const PostList = () => {
  const { postList, userId, errorMessage, setUserId } = usePostList();

  return (
    <div>
      <h2>PostList</h2>
      <div>
        <p>userID: {userId}</p>
        <input
          type="number"
          value={userId}
          onChange={(e) => setUserId(Number(e.target.value))}
        />
      </div>
      {errorMessage !== "" && (
        <div className="alert alert-danger" role="alert">
          {errorMessage}
        </div>
      )}
      <table className="table">
        <thead>
          <tr>
            <th scope="col">id</th>
            <th scope="col">ユーザーid</th>
            <th scope="col">タイトル</th>
            <th scope="col">内容</th>
          </tr>
        </thead>
        <tbody>
          {postList
            .filter((post) => post.userId === userId)
            .map((post) => (
              <tr key={post.id}>
                <td>{post.id}</td>
                <td>{post.userId}</td>
                <td>{post.title}</td>
                <td>{post.body}</td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
};

このようにロジックを別ファイルに切り出すことで、コンポーネントがスッキリするかと思います。