概要

よくあるタスクであるReactでapiのデータを取得してHTML要素として表示したいと思ったのでやってみました。

コード内容

基礎的なコード

import { useEffect, useState } from "react";

function FetchSample() {
  const [data, setData] = useState(undefined);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((json) => {
        setData(json);
      })
      .catch(() => alert("error"));
  }, []);

  return (
    <>
      {data === undefined
        ? ""
        : data.map((da) => <div key={da.id}>{`${da.id} ${da.title}`}</div>)}
    </>
  );
}

export default FetchSample;

useEffect を使ってfetchし、setData でdataに取得したものを入れます。
少し工夫したのは、dataが取得できるまでHTML側に何も表示しないようにするところでしょうか。
例えばliをmapでループさせる時、データが取得できるまで空のulタグが出てしまうとか、そういう状況がありそうだなとおもい気持ち悪いので、データが取得できてから必要なものを出力するようにしました。

おわりに

ほんとに基礎的なコードを記載しましたが、おそらくこの記載方法は、今はほとんどしないのかなと思います。
AIに聞いたらloadingやerror状態をreturn文を分けたりしてたり、こちらの動画では、AbortController()というのを使って連続したデータ取得が起こった時のケアをしたりしていました。
あとはuseSWRとかも使ってみたいです。

よくある基礎的なものほど、いろいろやり方があり、ベストプラクティスが見つけにくいなと思いました。