合体 useEffect+fetch+state

道具は3つ揃いました。「表示された後に動かす」useEffect(Ch1)、「待つ」await(Ch2)、「取ってくる」fetch(Ch3)。今日はこの3つを1つのコンポーネントに合体させます。完成するのは「開いたら、APIからユーザー一覧が自動で表示される画面」——実務のフロントエンドで一番よく書く形、いわば定食です。

完成形を先に見る

今日は先に全体を見せて、それから解剖します。

sample.tsx
import { useState, useEffect } from "react";

type User = {
  id: number;
  name: string;
};

const UserList = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    const load = async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const data = await response.json();
      setUsers(data);
    };
    load();
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};