---

---

【TypeScript in React】カスタムHooksでコンポーネントの処理を関数化

投稿日：2021年2月18日

HooksはReact16.8で追加されたstateやReactの機能を関数コンポーネントで使用できる機能です。この記事ではカスタムHooksを使い

---

はじめに

環境

---

Hooks作成の注意点

TOPレベルで呼べるようなHooksにする

Hooks名

---

実践

import { useEffect, useState } from "react";

/**
 * データをfetchしjsonデータを返すGeneric型のHook
 * @param url fetchするAPIのURL
 * @param callback
 * @returns {P}
 */
function useFetch<P>(url: string, callback?: (data: P) => void) {
  // stateの設定
  const [data, setData] = useState<P | null>(null);
  useEffect(() => {
    if (callback) {
      callback(data as P);
    }
  }, [data]);

  // fetch処理
  fetch(url)
    .then((response) => {
      if (response.ok) {
        return response.json();
      }
    })
    .then((data) => {
      setData(data);
    });

  return data;
}

export default useFetch;

import React, { useState } from "react";
import useFetch from "../hooks/useFetch";

/**
 * APIのレスポンスデータの型
 */
type ResponseDataType = Array<{
  userId: number;
  id: number;
  title: string;
  body: string;
}>;

/**
 * JSONPoaceholderのAPIからpost一覧を取得し、データを表示するコンポーネント
 */
const SampleComponent = () => {
  // fetchで取得できたデータ数
  const [dataLen, setDataLen] = useState(0);

  // カスタムfetchの使用
  const data = useFetch<ResponseDataType>(
    "https://jsonplaceholder.typicode.com/posts",
    (d) => {
      if (d) {
        setDataLen(d.length);
      }
    }
  );
  if (data == null) {
    return <div>データ取得中…</div>;
  }
  return (
    <div>
      <b>データ数:{dataLen}</b>
      <hr></hr>
      <div>
        {data.map((post, i) => {
          return (
            <>
              <div>userId={post.userId}</div>
              <div>id={post.id}</div>
              <div>title={post.title}</div>
              <div>body={post.body}</div>
              <hr></hr>
            </>
          );
        })}
      </div>
    </div>
  );
};

export default SampleComponent;

import React from "react";
import SampleComponent from "./components/SampleComponent";

function App() {
  return (
    <div className="App">
      <SampleComponent></SampleComponent>
    </div>
  );
}

export default App;

---

---

---