In the tutorial starter code, what does the Square component return?
A single button element with className=’square’. It uses className (not class) for CSS styling.
What is the role of index.js in the tutorial project?
It bridges components and the browser. It imports React, ReactDOM, styles, and the App component, then renders everything into the DOM.
What error do you get if you return two adjacent JSX elements without a wrapper?
‘Adjacent JSX elements must be wrapped in an enclosing tag.’ Fix by wrapping in a Fragment (<>…</>) or a <div>.
How does the Board pass different values to each Square?
Via the value prop: <Square value={squares[0]} />, <Square value={squares[1]} />, etc.
How does Square read a prop passed from Board?
By destructuring in the function signature: function Square({ value }). Then use {value} in JSX to display it.
What is the difference between writing {value} and value in JSX?
Curly braces render the JavaScript variable. Without them, JSX renders the literal text ‘value’.
How do you make a Square interactive (respond to clicks)?
Declare a handleClick function inside Square, then pass it to onClick: <button onClick={handleClick}>.
How does useState work in the Square component?
const [value, setValue] = useState(null) — value holds current state (initially null), setValue updates it and triggers re-render.
When setValue(‘X’) is called, what happens?
React re-renders the Square component with value now equal to ‘X’, so X appears on screen.
Is state shared between different Square instances?
No. Each Square has its own independent state. Clicking one does not affect the others.
Why is game state moved from individual Squares into the Board?
The Board needs to know all 9 squares to check for a winner. Keeping state in each Square makes coordination difficult.
How does Board initialize its state for the 9 squares?
const [squares, setSquares] = useState(Array(9).fill(null)) — an array of 9 nulls, one per square.
Since state is private to Board, how does Square update the board?
Board passes a callback (onSquareClick) as a prop. Square calls it on click, triggering Board’s handleClick.
Why does onSquareClick={() => handleClick(0)} use an arrow function?
To pass a function reference that calls handleClick(0) on click. Without the arrow, it would call immediately during render.
Why does handleClick(0) without an arrow function cause an infinite loop?
It runs during render, calls setSquares, triggers re-render, runs handleClick(0) again — infinite loop.
What does handleClick do to update the board?
Creates a copy with .slice(), sets the clicked index to X or O, then calls setSquares(nextSquares) to re-render.
Why does handleClick use squares.slice() instead of modifying the array directly?
To preserve immutability. A new copy enables time-travel, cheap change detection, and keeps previous states intact.
How does immutability help React performance?
React can check if data changed via reference comparison (===) instead of deep-comparing the entire object tree.
How does immutability enable time-travel?
Each move creates a new array without mutating old ones, so all previous board states are preserved and can be revisited.
Why does handleClick return early in two cases?
if (calculateWinner(squares) || squares[i]) return — prevents overwriting a filled square and stops play after a win.
How does the game determine whose turn it is?
xIsNext = currentMove % 2 === 0. X goes on even moves (0, 2, 4…), O on odd (1, 3, 5…).
What does calculateWinner check?
All 8 winning lines (3 rows, 3 columns, 2 diagonals). If any line has three matching non-null values, that player wins.
Describe the full click flow when a user clicks a square.
Square button onClick fires -> calls onSquareClick prop -> Board handleClick copies squares, sets X/O, calls setSquares -> Board and Squares re-render.
What does lifting state up mean in this tutorial?
Moving shared state into a parent. It happens twice: Square -> Board (squares), then Board -> Game (history).
