React Hooks早わかり(useEffect編)

useEffectとは

公式リファレンス
https://ja.reactjs.org/docs/hooks-reference.html#useeffect
useEffect に渡された関数はレンダーの結果が画面に反映された後に動作します。

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

export type Photo = {
  albumId: number;
  id: number;
  title: string;
  url: string;
  thumbnailUrl: string;
};

export const fetchPhoto = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/Photos");
  const photos = (await res.json()) as Photo[];
  return photos;
};

const UseEffectSample: VFC = () => {
  /** state */
  const [Photos, setPhotos] = useState<Photo[]>([]);

  /** effect */
  useEffect(() => {
    fetchPhoto().then((photos) => setPhotos(photos));
  }, []);

  return (
    // return jsx
  );

useEffect の第 2 引数

• 空の配列[] → Mount 時のみ第一引数の関数が実行される。（Vueで言うところのmounted）
• [特定の値] → 特定の値の変化を検知した際に実行される。（Vueで言うところのwatch）