react-hooks/exhaustive-depsについて

Question

下記のコードで次のようなワーニングが発生しました
ドキュメント等を読んでもお手上げ状態です.
解決方法をご存知の方はよろしくお願いします.

import React, { useState } from "react";
import useFetch from "use-http";
 const [state, setState] = useState<Image[]>([]);
  const { get, response, loading, error } = useFetch(
    "https://hoge.hogecom"
  );

  React.useEffect(() => {
    const f = async () => {
      const images = await get("/phots?limit=10");
      const { data, ok } = images;
      if (ok) {
        setState(data.images);
      }
    };
    f();
  }, []);

Line 36:6:  React Hook React.useEffect has a missing dependency: 'get'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Answer 1

useEffectの第二引数の配列にgetを入れないままuseEffect中で使用しているためです。

React.useEffect(() => {
  const f = async () => {
    const images = await get("/phots?limit=10");
    const { data, ok } = images;
    if (ok) {
      setState(data.images);
    }
  };
  f();
}, [get]);

以下参考です。

• 安全に React Hooks を使用する#react-hooks/exhaustive-deps を設定する

Answer 2

メッセージのとおりです。getをuseEffectの第2引数の配列に入れてください。

  React.useEffect(() => {
    const f = async () => {
      const images = await get("/phots?limit=10");
      const { data, ok } = images;
      if (ok) {
        setState(data.images);
      }
    };
    f();
  }, [get, setState]);