useEffect has missing dependencyのエラーを消したい

ESLint React Netlify

経緯
ESLintのuseEffect has amissing dependencyというwarningを放置したままpushしたら
Netlifyの自動デプロイに失敗していた


原因
useEffect内で依存関係のある変数を使用
かつ
useEffectの第二引数が空配列の場合


解決方法

  1. 依存関係を解消する(dependencyが更新されるたびにuseEffectが実行されてしまう)
  2. 特定行だけESLintのルールを無効にする（今回はこれ）
  3. package.jsonの設定でESLintを無効にする(コード全体で無効になる)


下記コメントを挿入することで次の行のwarningを無効にできる

// eslint-disable-next-line react-hooks/exhaustive-deps

例

useEffect(() => {
  if (state.requestStates !== requestStates.loading) { return; }
  fetchReposApi();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [state.requestStates]);