[勉強用] React hooksで非同期処理を書く (ステップ3)

はじめに

前ステップから続き、勉強用のuseFetchを書いていきます。今回のテーマはローディング処理です。

課題

非同期処理は、結果が得られるまでに時間がかかることが多いです。そこで、処理が完了するまでは何らかのローディング状態を表示するなどしておくことが望ましいです。

ステップ3: loadingフラグ

const useFetch = url => {
  const [result, setResult] = useState({});
  useEffect(() => {
    let cleanedUp = false;
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      if (!cleanedUp) {
        setResult({ data });
      }
    };
    setResult({ loading: true });
    fetchData();
    const cleanup = () => {
      cleanedUp = true;
    };
    return cleanup;
  }, [url]);
  return result;
};

非同期処理を開始する直前にloadingフラグをセットします。これにより、非同期処理開始後にコンポーネントが再描画されて、loadingフラグにより表示制御ができるようになります。

ちなみに、Suspenseが使えるようになれば、そちらが主流になることが予想されるため、loadingフラグによる処理は過渡的なものになるかもしれません。

動作確認

実際に動くコードはこちらです。codesandbox

おわりに

本コードは勉強用ですので、そのままでは使わないでください。(ちゃんとした実装はこちら)
さらなる課題と解決は次のステップへ。