React初心者がやるReact Hooks -useEffect編-

アウトプットのためにReact HooksのuseEffectを使用した簡単なアプリケーションを作成する

プロジェクト作成

$ npx create-react-app effect-tutorial --template typescript

マウント時のみにuseEffectを発火させる

useEffectに空の配列を引数で渡すことで可能になる

Counter.tsx

import React, { useEffect } from 'react';

const Counter: React.FC = () => {
  useEffect(() => {
    console.log('useEffect発火');
  }, []);
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
};

export default Counter;

マウント時と特定のStateが変化した時のみにuseEffectを発火させる

useStateを使用する
空の配列にStateを入れる
{count}が増えるごとにuseEffectが発火する

Counter.tsx

import React, { useState, useEffect } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log('useEffect発火');
  }, [count]);
  return (
    <>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount((prev) => prev + 1);
        }}
      >
        PLUS
      </button>
    </>
  );
};

export default Counter;

外部からデータ取得をする

JSONPlaceholderよりデータを取得する

ItemList.tsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';

type TodoType = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

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

type ItemType = {
  id: number;
  title: string;
};

type ResourceType = 'todos' | 'posts';

const ItemList: React.FC = () => {
  const [items, setItems] = useState<ItemType[]>([]);
  const [resource, setResource] = useState<ResourceType>('todos');

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const response = await axios.get(
          `https://jsonplaceholder.typicode.com/${resource}`
        );
        console.log(response);
        const itemData: ItemType[] = response.data.map(
          (responseData: TodoType | PostType) => {
            return { id: responseData.id, title: responseData.title };
          }
        );
        setItems(itemData);
      } catch (err) {
        console.error(err);
      }
    };
    fetchItems();
  }, [resource]);
  return (
    <>
      <h1>itemList</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

export default ItemList;