[解決済み] useEffect React Hook使用時の依存性欠如の警告を修正する方法

質問

React 16.8.6で（以前のバージョン16.8.3では良好でした）、フェッチリクエストの無限ループを防止しようとすると、このエラーが発生します。

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

無限ループを停止させる解決策が見つからない。を使わないようにしたい。 useReducer() . 私はこの議論を見つけた [ESLint] lint ルール #14920 'exhaustive-deps' に対するフィードバック ここで、可能な解決策は You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing. 自分のやっていることに自信がないので、まだ実装してみたことはない。

現在、こんな設定をしています。 ReactフックのuseEffectが永遠に連続実行される/無限ループする についてのコメントのみです。 useCallback() というのは、よくわからない。

現在、私が使っている方法 useEffect() (と同じように最初に一度だけ実行したい）。 componentDidMount() ):

useEffect(() => {
    fetchBusinesses();
  }, []);

const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };

解決方法は？

fetchBusinessesメソッドをエフェクト以外の場所で使用していない場合、単純にエフェクトに移動して警告を回避することができます。

useEffect(() => {
    const fetchBusinesses = () => {
       return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };
  fetchBusinesses();
}, []);

しかし、レンダリング以外でfetchBusinessesを使用する場合、次の2点に注意する必要があります。

1. について何か問題がありますか？ ではなく パス fetchBusinesses をメソッドとして使用し、それを囲むクロージャでマウントするのですか？
2. あなたのメソッドは、その周りのクロージャから受け取るいくつかの変数に依存していますか？これは、あなたの場合ではありません。
3. レンダリングのたびに fetchBusinesses は再作成されるため、useEffect に渡すと問題が発生します。したがって、依存関係の配列に渡す場合は、まず fetchBusinesses をメモする必要があります。

結論から言うと、もしあなたが fetchBusinesses の外側で useEffect を使用すると、ルールを無効にすることができます。 // eslint-disable-next-line react-hooks/exhaustive-deps そうでなければ、このメソッドを useEffect の内部に移動させることができます。

ルールを無効にするには、次のように記述します。

useEffect(() => {
   // other code
   ...

   // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])