一つのメソッドを呼んだときと複数のメソッドを呼んだときの違いがわからない

Reactでオセロを作成しているのですが、(以下全体のコードです。)

js
1import React, { useState } from 'react'
2import Square from '../Square'
3import styles from './styles'
4
5const { Status, BoardRow } = styles
6
7const BLACK_PIECE = 'black'
8const WHITE_PIECE = 'white'
9
10let defaultBoard = new Array(8)
11for (let i = 0; i < defaultBoard.length; i++) {
12  defaultBoard[i] = new Array(8)
13}
14
15for (let x = 0; x < 8; x++) {
16  for (let y = 0; y < 8; y++) {
17    defaultBoard[x][y] = null
18  }
19}
20
21// defaultBoard[3][3] = BLACK_PIECE
22// defaultBoard[4][3] = WHITE_PIECE
23// defaultBoard[3][4] = WHITE_PIECE
24// defaultBoard[4][4] = BLACK_PIECE
25
26// 検証のために石の置き方を変えてます。
27defaultBoard[3][0] = BLACK_PIECE
28defaultBoard[3][1] = WHITE_PIECE
29defaultBoard[3][2] = WHITE_PIECE
30defaultBoard[3][3] = WHITE_PIECE
31defaultBoard[3][5] = WHITE_PIECE
32defaultBoard[3][6] = WHITE_PIECE
33defaultBoard[3][7] = BLACK_PIECE
34defaultBoard[3][7] = BLACK_PIECE
35defaultBoard[0][4] = BLACK_PIECE
36defaultBoard[1][4] = WHITE_PIECE
37defaultBoard[2][4] = WHITE_PIECE
38defaultBoard[4][4] = WHITE_PIECE
39defaultBoard[5][4] = WHITE_PIECE
40defaultBoard[6][4] = WHITE_PIECE
41defaultBoard[7][4] = WHITE_PIECE
42defaultBoard[2][5] = WHITE_PIECE
43defaultBoard[1][6] = WHITE_PIECE
44defaultBoard[0][7] = BLACK_PIECE
45defaultBoard[4][5] = WHITE_PIECE
46defaultBoard[5][6] = WHITE_PIECE
47defaultBoard[6][7] = BLACK_PIECE
48defaultBoard[2][3] = WHITE_PIECE
49defaultBoard[1][2] = WHITE_PIECE
50defaultBoard[0][1] = BLACK_PIECE
51defaultBoard[4][3] = WHITE_PIECE
52defaultBoard[5][2] = WHITE_PIECE
53defaultBoard[6][1] = WHITE_PIECE
54defaultBoard[7][0] = WHITE_PIECE
55
56const Board = () => {
57  const [squares, setSquares] = useState(defaultBoard)
58  const [currentPiece, setCurrentPiece] = useState(BLACK_PIECE)
59  const status = 'Next player: ' + (currentPiece === BLACK_PIECE ? '黒の番' : '白の番');
60
61  const boardInit = () => {
62    if (!window.confirm('リセットしてもよろしいですか？')) {
63      return false
64    }
65
66    for (let x = 0; x < 8; x++) {
67      for (let y = 0; y < 8; y++) {
68        let newSquares = squares.concat()
69        newSquares[x][y] = null
70        setSquares(newSquares)
71      }
72    }
73    let newSquares = squares.concat()
74    newSquares[3][3] = BLACK_PIECE
75    newSquares[4][3] = WHITE_PIECE
76    newSquares[3][4] = WHITE_PIECE
77    newSquares[4][4] = BLACK_PIECE
78    setCurrentPiece(BLACK_PIECE)
79    setSquares(newSquares)
80  }
81
82  const reversePiece = (currentX, currentY, x, y, prevSquares) => {
83    const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
84    const newSquares = squares.concat()
85    let nextYIndex = currentY + y
86    let nextXIndex = currentX + x
87
88    if (newSquares[nextYIndex][nextXIndex] === nextPiece) {
89      while(true) {
90        if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
91          console.log('正常')
92          newSquares[currentY][currentX] = currentPiece
93          setSquares([...newSquares])
94          setCurrentPiece(nextPiece)
95          break
96        }
97
98        if (newSquares[nextYIndex][nextXIndex] === null) {
99          // breakする前に元の配列に戻す
100          console.log('次が何もおいてないから元に戻したい')
101          console.log([...prevSquares])
102          setSquares([...prevSquares])
103          break
104        }
105
106        nextYIndex = nextYIndex + y
107        nextXIndex = nextXIndex + x
108
109        if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
110          // breakする前に元の配列に戻す
111          console.log('挟み撃ちできる自分のコマがないから元に戻したい')
112          console.log([...prevSquares])
113          setSquares([...prevSquares])
114          break
115        }
116      }
117    }
118  }
119
120  const handleClick = (x, y) => {
121    if (squares[y][x] === null) {
122      let prevSquares = JSON.parse(JSON.stringify(squares));
123      reversePiece(x, y, 0, -1, prevSquares) // 上
124      prevSquares = JSON.parse(JSON.stringify(squares));
125      reversePiece(x, y, 1, -1, prevSquares) // 右上
126      prevSquares = JSON.parse(JSON.stringify(squares));
127      reversePiece(x, y, 1, 0, prevSquares) // 右
128      prevSquares = JSON.parse(JSON.stringify(squares));
129      reversePiece(x, y, 1, 1, prevSquares) // 右下
130      prevSquares = JSON.parse(JSON.stringify(squares));
131      reversePiece(x, y, 0, 1, prevSquares) // 下
132      prevSquares = JSON.parse(JSON.stringify(squares));
133      reversePiece(x, y, -1, 1, prevSquares) // 左下
134      prevSquares = JSON.parse(JSON.stringify(squares));
135      reversePiece(x, y, -1, 0, prevSquares) // 左
136      prevSquares = JSON.parse(JSON.stringify(squares));
137      reversePiece(x, y, -1, -1, prevSquares) // 左上
138    }
139  }
140
141  // 縦軸y, 横軸x
142  const renderSquare = (boardRow, y) => {
143    return (
144      boardRow[y].map((square, x) => {
145        return (
146          <Square
147            square={ square }
148            key={ x }
149            addValue={ () => handleClick(x, y) }
150          />
151        )
152      })
153    )
154  }
155
156  return (
157    <>
158      <button
159        onClick={ boardInit }
160      >
161        最初からやり直す
162      </button>
163      <Status>{ status }</Status>
164      <BoardRow>
165        { renderSquare(squares, 0) }
166      </BoardRow>
167      <BoardRow>
168        { renderSquare(squares, 1) }
169      </BoardRow>
170      <BoardRow>
171        { renderSquare(squares, 2) }
172      </BoardRow>
173      <BoardRow>
174        { renderSquare(squares, 3) }
175      </BoardRow>
176      <BoardRow>
177        { renderSquare(squares, 4) }
178      </BoardRow>
179      <BoardRow>
180        { renderSquare(squares, 5) }
181      </BoardRow>
182      <BoardRow>
183        { renderSquare(squares, 6) }
184      </BoardRow>
185      <BoardRow>
186        { renderSquare(squares, 7) }
187      </BoardRow>
188    </>
189  );
190}
191
192export default Board;
193

①挟み撃ちすることができる場合
②挟み撃ちするコマが見つからず何も置かれていなかった時
③挟み撃ちするコマが見つからず枠からはみ出てしまう場合

この３パターンを以下のコードで表し、②と③のパターンに当てはまる場合にはprevSquares(裏返す前の盤)に戻すためにsetSquaresを実行し、①に当てはまる場合にだけnewSquares(裏返した後の盤)をsetSquareしようとしています。

js
1if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
2  // ①
3  console.log('正常')
4  newSquares[currentY][currentX] = currentPiece
5  setSquares(newSquares)
6  setCurrentPiece(nextPiece)
7  break
8}
9
10if (newSquares[nextYIndex][nextXIndex] === null) {
11  // ②
12  console.log('次が何もおいてないから元に戻したい')
13  console.log(prevSquares)
14  setSquares(prevSquares)
15  break
16}
17
18newSquares[nextYIndex][nextXIndex] = currentPiece
19nextYIndex = nextYIndex + y
20nextXIndex = nextXIndex + x
21
22if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
23  // ③
24  console.log('挟み撃ちできる自分のコマがないから元に戻したい')
25  console.log(prevSquares)
26  setSquares(prevSquares)
27  break
28}

しかし以下の盤面の時、コマを裏返そうとした時に

js
1const handleClick = (x, y) => {
2  if (squares[y][x] === null) {
3    // concatだと同じ配列と認識されてしまうので別のものとして処理するために前の盤面をコピーして
4    // メソッドに渡しています。
5    let prevSquares = JSON.parse(JSON.stringify(squares));
6      reversePiece(x, y, 0, -1, prevSquares) // 上
7      prevSquares = JSON.parse(JSON.stringify(squares));
8      reversePiece(x, y, 1, -1, prevSquares) // 右上
9      prevSquares = JSON.parse(JSON.stringify(squares));
10      reversePiece(x, y, 1, 0, prevSquares) // 右
11      prevSquares = JSON.parse(JSON.stringify(squares));
12      reversePiece(x, y, 1, 1, prevSquares) // 右下
13      prevSquares = JSON.parse(JSON.stringify(squares));
14      reversePiece(x, y, 0, 1, prevSquares) // 下
15      prevSquares = JSON.parse(JSON.stringify(squares));
16      reversePiece(x, y, -1, 1, prevSquares) // 左下
17      prevSquares = JSON.parse(JSON.stringify(squares));
18      reversePiece(x, y, -1, 0, prevSquares) // 左
19      prevSquares = JSON.parse(JSON.stringify(squares));
20      reversePiece(x, y, -1, -1, prevSquares) // 左上
21  }
22}

全て裏返ってしまいます。

しかし全ての方向に対して裏返す処理を行う(複数のメソッドを呼んだ時)のではなく、
単一方向で呼んだ場合(一つのメソッドだけを呼んだ時)だと

js
1const handleClick = (x, y) => {
2  if (squares[y][x] === null) {
3    let prevSquares = JSON.parse(JSON.stringify(squares));
4    // reversePiece(x, y, 0, -1, prevSquares) // 上
5    // prevSquares = JSON.parse(JSON.stringify(squares));
6    // reversePiece(x, y, 1, -1, prevSquares) // 右上
7    // prevSquares = JSON.parse(JSON.stringify(squares));
8    // reversePiece(x, y, 1, 0, prevSquares) // 右
9    // prevSquares = JSON.parse(JSON.stringify(squares));
10    // reversePiece(x, y, 1, 1, prevSquares) // 右下
11    // prevSquares = JSON.parse(JSON.stringify(squares));
12    reversePiece(x, y, 0, 1, prevSquares) // 下 // ---> ここだけ呼ぶ
13    // prevSquares = JSON.parse(JSON.stringify(squares));
14    // reversePiece(x, y, -1, 1, prevSquares) // 左下
15    // prevSquares = JSON.parse(JSON.stringify(squares));
16    // reversePiece(x, y, -1, 0, prevSquares) // 左
17    // prevSquares = JSON.parse(JSON.stringify(squares));
18    // reversePiece(x, y, -1, -1, prevSquares) // 左上
19  }
20}