【React】カスタムフックについて

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

カスタムフックについて

カスタムフックとは

カスタムフックとは、複数のコンポーネントに共通する処理を取り出して作成した関数のことです。
use〇〇という名前で作成します。

カスタムフックの例

カスタムフックを作成

UseFechData.jsx

import { useState, useEffect } from 'react';

const useFetchData = (url) => {
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchPost = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
    };
    fetchPost();
  }, [url]);
  return { data };
};

export default useFetchData;

カスタムフックを使用

User.jsx

import useFetchData from '../hooks/useFetchData';

const User = () => {
  const { data } = useFetchData('https://jsonplaceholder.typicode.com/users');

  return (
    <div>
      <h1>ユーザ一覧</h1>
      <ul>
        {data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default User;