Beny #5
Beny #5
Conversation
src/components/Game.tsx
Outdated
| squares[index] = NEXT_PLAYER; | ||
| calculateWinner(squares); | ||
| setSquares([...squares]); |
There was a problem hiding this comment.
In React, state should be treated as immutable. When you do squares[index] = ..., you are changing the actual object in memory that React is currently tracking.
src/components/Game.tsx
Outdated
| const calculateWinner = (squares: (string | null)[]) => { | ||
| if (!squares) return; | ||
|
|
||
| if (squares[0] && squares[0] === squares[1] && squares[0] === squares[2]) { | ||
| setWinner(true); | ||
| return; | ||
| } | ||
| if (squares[3] && squares[3] === squares[4] && squares[3] === squares[5]) { | ||
| setWinner(true); | ||
| return; | ||
| } | ||
| if (squares[6] && squares[6] === squares[7] && squares[6] === squares[8]) { | ||
| setWinner(true); | ||
| return; | ||
| } | ||
| if (squares[0] && squares[0] === squares[3] && squares[0] === squares[6]) { | ||
| setWinner(true); | ||
| return; | ||
| } | ||
| if (squares[1] && squares[1] === squares[4] && squares[1] === squares[7]) { | ||
| setWinner(true); | ||
| return; | ||
| } | ||
| if (squares[2] && squares[2] === squares[5] && squares[2] === squares[8]) { | ||
| setWinner(true); | ||
| return; | ||
| } | ||
| if (squares[0] && squares[0] === squares[4] && squares[0] === squares[8]) { | ||
| setWinner(true); | ||
| return; | ||
| } | ||
| if (squares[2] && squares[2] === squares[4] && squares[2] === squares[6]) { | ||
| setWinner(true); | ||
| return; | ||
| } |
There was a problem hiding this comment.
Writing out every single if statement for every possible win is prone to typos. It makes the function very long and hard to read at a glance.
Define the winning combinations as an array of arrays (a "Win Map") and loop through them. This follows the DRY principle and makes the code much cleaner.
src/components/Game.tsx
Outdated
| Array(9).fill(null) | ||
| ); | ||
| const [isXNext, setIsXNext] = useState(true); | ||
| const [winner, setWinner] = useState(false); |
There was a problem hiding this comment.
Avoid redundant state for winner. Since it can be calculated directly from squares during render, deriving it ensures your UI is always in sync with the board and prevents 'syncing' bugs.
2 participants
No description provided.