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

はじめに

以前の記事で、useFetchの実装を紹介しましたが、もう少し単純なバージョンを順を追って書いていきたいと思います。

例題

非同期処理には色々ありますが、一番よく使われるであろうデータ取得を例にします。
https://reqres.in/api/user/1?delay=1
からダミーのユーザデータを取得するとします。
delayを指定するとデータ取得を遅延させることができます。

ステップ１: 最低限の実装

const useFetch = url => {
  const [result, setResult] = useState({});
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setResult({ data });
    };
    fetchData();
  }, [url]);
  return result;
};

一つのポイントは、async関数をそのままuseEffectに渡さないことです。戻り値がpromiseになるので、useEffectが怒ります。参考

もう一つのポイントは、useEffectの第二引数(deps)に [url] を渡すことです。この非同期処理はurlに依存するためです。urlが変わると再度処理が走ります。eslintのexhaustive-depsルールを有効にすると簡単に検知できます。

動作確認

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

おわりに

本コードは勉強用ですので、そのままでは使わないでください。
課題と解決は次のステップへ。