# カスタムフックス **カスタムフックス**とは、コンポーネントのロジック部分を切り出し関数化する手法です。**カスタムフックス**を使うことで、ロジックを分けることができ、同じロジックを別のところで使い回すことができます。 `src`配下に`hooks`ディレクトリを作成しましょう。その中に`usePostList.ts`を作成しましょう。カスタムフックスの命名は基本的に`use~`としましょう。`usePostList.ts`内には`usePostList`という関数を定義しましょう。

export const usePostList = () => {}

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

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や関数を返却するようにします。

... 
  }, []);

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

上記にて作成したフックスを呼び出します。上記を呼び出すには、`const { ... } = usePostList()`と呼び出すことで、stateや関数を取得することができます。ですので、`PostList.tsx`のロジック部分と不要なインポートを削除して、`usePostList()`を呼び出します。最終的には以下のような形になります。

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>
  );
};

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