Asaf's React TicTacToe Practice #1
Conversation
|
|
||
| const timeLimit = 10; | ||
|
|
There was a problem hiding this comment.
Move constants like 'timeLimit' outside the component.
Defining it inside causes it to be re-initialized on every render,
| const timeLimit = 10; | ||
|
|
||
| const [isXNext, setIsXNext] = useState(true); | ||
| const [winner, setWinner] = useState<string | null>(null); |
There was a problem hiding this comment.
You don't need a separate state for 'winner' because it can be calculated directly from the 'squares' array during render. Storing it in state can lead to synchronization bugs.
| useEffect(() => { | ||
| if (!timeRunning || winner) return; | ||
|
|
||
| const timerId = window.setInterval(() => { | ||
| setTime((currTime) => Math.max(currTime - 1, 0)); | ||
| }, 1000); | ||
|
|
||
| return () => window.clearInterval(timerId); | ||
| }, [timeRunning, winner]); | ||
|
|
||
| useEffect(() => { | ||
| if (!timeRunning || winner) return; | ||
|
|
||
| if (time === 0) { | ||
| setIsXNext((currPlayer) => !currPlayer); | ||
| setTime(timeLimit); | ||
| } | ||
| }, [time, timeRunning, winner, timeLimit]); | ||
|
|
There was a problem hiding this comment.
You have two separate UseEffects monitoring the timer. This can cause race conditions where the timer ticks to 0 but the logic to switch players doesn't trigger until the next render cycle.
| {winner == null | ||
| ? isXNext | ||
| ? "Next Player: X" | ||
| : "Next Player: O" | ||
| : null} |
There was a problem hiding this comment.
Avoid nested ternary operators in the return block. Calculate a 'status' string before the return statement and just display {status} here.
| </button> | ||
| ); | ||
| } | ||
| export const Square = ({ value, onClickFunction }: SquareProps) => { |
There was a problem hiding this comment.
You are using both a Named Export (export const) and a Default Export at the bottom. It's better to stick to one.
|
There is an issue between your Parent (Board) and Child (Square) components. Check both files and ensure the names match exactly in the interface and the component usage. |
2 participants
Completion of tasks:
1 — Make the Squares Clickable
2 — Prevent Overwriting Moves
3 — Add Winner Detection
4 — Stop Moves After Win
5 — Add a “Play Again” Button
6 — Add a Turn Countdown Timer