useEffectを用いた際の警告文

前提・実現したいこと

Reactの勉強を兼ねて、オセロゲーム制作中にuseEffectを用いた場面で警告文がでているが、
何故警告されているのかがよく分からず、解決法も不明

発生している問題・エラーメッセージ

src/containers/Othellos.jsx
  Line 179:5:  React Hook useEffect has missing dependencies: 'checkReturn', 'endState', and 'piecesCountString'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  Line 195:5:  React Hook useEffect has a missing dependency: 'piecesCountString'. Either include it or remove the dependency array                                   react-hooks/exhaustive-deps

ソースコード

該当しているソースコード

React
1  // 相手番に移った際に相手が行動可能かを確認し、できない場合は自分番に変更
2  useEffect(() => {
3    const checkArray = piecesCountString("");
4    let count = 0;
5    checkArray.forEach((check) => {
6      if (checkReturn(check).length === 1) {
7        count += 1
8      }
9    })
10    if (count === checkArray.length) {
11      let endcopy = endState
12      endcopy += 1
13      setEndState(endcopy);
14      if (endcopy < 2) {
15        setGameState(!gameState);
16      }
17    }
18  },[gameState]);
19
20  // 勝者を表示するための処理、endStateが２以上のときは、両者とも置く場所がなくなっている状態＝ゲーム終了
21  useEffect(() => {
22    if (endState < 2) {
23      return;
24    }
25
26    let winner = ""
27    const blackPiecesCount = piecesCountString("●").length
28    const whitePiecesCount = piecesCountString("○").length
29    if (blackPiecesCount > whitePiecesCount) {
30      winner = "●"
31    } else {
32      winner = "○"
33    }
34    document.getElementById("check").innerHTML = `勝者は${winner}です`
35  },[endState]);

全体のソースコード

export const Othellos = () => {
  const initializeArray = ["","","","","","","","",
                           "","","","","","","","",
                           "","","","","","","","",
                           "","","","●","○","","","",
                           "","","","○","●","","","",
                           "","","","","","","","",
                           "","","","","","","","",
                           "","","","","","","","",]
  const [pieces, setPieces] = useState(initializeArray);
  const [gameState, setGameState] = useState(true);
  const [endState, setEndState] = useState(0);

  // 引数の場所を黒にして、ゲームの状態を変更する(引数は配列型)
  const changeBlackPiece = (changeArray) => {
    const piecesArray = pieces.slice();
    changeArray.forEach(i => {
      piecesArray[i] = "●";
    });
    setPieces(piecesArray);
  }

  // 引数の場所を白にして、ゲームの状態を変更する(引数は配列型)
  const changeWhitePiece = (changeArray) => {
    const piecesArray = pieces.slice();
    changeArray.forEach(i => {
      piecesArray[i] = "○";
    });
    setPieces(piecesArray);
  }

  // マスをクリックした際の挙動
  const squareClick = (i) => {
    // 既に駒が置いている箇所の場合は早期リターン
    if (pieces[i]) {
      return;
    }

    const changeArray = checkReturn(i);
    // オセロのルール上置けない場所の場合は早期リターン
    if (changeArray.length === 1) {
      return;
    }

    if (gameState === true) {
      changeBlackPiece(changeArray);
    } else {
      changeWhitePiece(changeArray);
    }
    setEndState(0);
    console.log(endState);
    setGameState(!gameState);
  }

  // 検査対象が駒を配置していい場所かの確認
  const checkNumber = (searchNumber, check, i) => {
    // 横の場合
    if (check === 1 || check === -1) {
      const leftLimit = Math.floor(i / 8) * 8;
      const rightLimit = leftLimit + 7
      if (searchNumber >= leftLimit && searchNumber <= rightLimit) {
        return true;
      } else {
        return false;
      }
    }
    // 右斜めの場合
    if (check === -7 || check === 9) {
      const searchNumberSurplus = searchNumber % 8
      const iSurplus = i % 8
      if (searchNumber >= 0 && searchNumber < 64 && iSurplus < searchNumberSurplus) {
        return true;
      } else {
        return false;
      }
    }
    // 左斜めの場合
    if (check === -9 || check === 7) {
      const searchNumberSurplus = searchNumber % 8
      const iSurplus = i % 8
      if (searchNumber >= 0 && searchNumber < 64 && iSurplus > searchNumberSurplus) {
        return true;
      } else {
        return false;
      }
    }
    // 上下の場合
    if (searchNumber >= 0 && searchNumber < 64) {
      return true;
    } else {
      return false;
    }
  }

  //引数の場所においた場合に、どの駒が変化するかを配列にて返す（配列には引数も含まれる）
  const checkReturn = (i) => {
    const myselfPiece = gameState ? "●" : "○"
    const opponentPiece = gameState ? "○" : "●"
    const searchArray = [8, -8, 7, -7, 9, -9, 1, -1]
    let changeArray = [i]

    for (let j = 0; j < searchArray.length; j++) {
      let searchNumber = i + searchArray[j]
      let count = 1
      if (checkNumber(searchNumber, searchArray[j], i) && pieces[searchNumber] === opponentPiece) {
        while(true) {
          if (checkNumber(searchNumber, searchArray[j], i) && pieces[searchNumber] === opponentPiece) {
            if (count > 6) break;
            searchNumber += searchArray[j];
            count += 1;
          } else if (checkNumber(searchNumber, searchArray[j], i) && pieces[searchNumber] === myselfPiece) {
            for (let k = 1; k <= count; k++) {
              changeArray.push(searchNumber - searchArray[j] * k)
            }
            break;
          } else {
            break;
          }
        }
      }
    }
    return changeArray
  }

  // 与えられた文字列がpiecesのどこに入っているかを配列で返す
  const piecesCountString = (countString) => {
    let stringArray = [];
    pieces.forEach((piece, index) => {
      if (piece === countString) {
        stringArray.push(index)
      }
    })
    return stringArray;
  }

  useEffect(() => {
    const checkArray = piecesCountString("");
    let count = 0;
    checkArray.forEach((check) => {
      if (checkReturn(check).length === 1) {
        count += 1
      }
    })
    if (count === checkArray.length) {
      let endcopy = endState
      endcopy += 1
      setEndState(endcopy);
      if (endcopy < 2) {
        setGameState(!gameState);
      }
    }
  },[gameState]);

  useEffect(() => {
    if (endState < 2) {
      return;
    }

    let winner = ""
    const blackPiecesCount = piecesCountString("●").length
    const whitePiecesCount = piecesCountString("○").length
    if (blackPiecesCount > whitePiecesCount) {
      winner = "●"
    } else {
      winner = "○"
    }
    document.getElementById("check").innerHTML = `勝者は${winner}です`
  },[endState]);

  return (
    <React.Fragment>
      <MainWrapper>
        <p id="check">現在の手番は{ gameState ? "●" : "○" }です</p>
        <p>●の数:{piecesCountString("●").length}個    ○の数:{piecesCountString("○").length}個</p>
        <BoardWrapper>
          {
            pieces.map((piece, index) =>
              <OthelloSquare piece={piece} key={index} onClick={() => squareClick(index)}/>
            )
          }
        </BoardWrapper>
        <button onClick={() => console.log(endState)}>aaaa</button>
      </MainWrapper>
    </React.Fragment>
  )
}

試したこと

第２因数に警告されている関数を入れてみたが、別の警告文が発生したため断念

maisumakun

2021/05/20 05:49

> 第２因数に警告されている関数を入れてみたが、別の警告文が発生したため断念「別の警告文」はどのようなものでしたか？

dym330

2021/05/20 07:31

すいません解決しました。警告文にはuseCallback関数で関数を囲めと記載がありました。 useCallback自体を引数が同じ場合、実行せずキャッシュを用いるものと勘違いしており、 useStateで定義したstateの値も関数の実行結果に関わってくるため、useStateを使えないな。。。と思っておりました。そうではないことに気づいたため用いたところ解決した運びです。