LoginSignup
5

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-28

はじめに

前ステップから続き、勉強用の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

おわりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5