Premium

Tic-Tac-Toe (Component State + Winner Detection)

By FrontendAtlas Team · Updated Jan 30, 2026

Build Tic-Tac-Toe with React state: a 9-cell board, alternating turns, win/draw detection, and a reset button. Prevent overwriting a filled cell and stop play once the game is over. Show a clear status message for next player, winner, or draw. Framework focus: React hooks (useState/useEffect),…

Render the Tic-Tac-Toe UI as the main component.
Render a 3×3 board (9 cells).

What you’ll build / What this tests

This premium react coding focuses on Tic-Tac-Toe (Component State + Winner Detection). You’ll apply react and state thinking with easy level constraints. The prompt emphasizes Build Tic-Tac-Toe with React state: a 9-cell board, alternating turns, win/draw detection, and a reset button.….

Learning goals

Translate the prompt into a clear react API signature and return shape.
Apply react, state, event-handlers techniques to implement tic-tac-toe (component state + winner detection).
Handle easy edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in react.

Key decisions to discuss

Define the exact input/output contract before coding.
Choose iteration vs higher-order methods for readability.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render the Tic-Tac-Toe UI as the main component.
Render a 3×3 board (9 cells).
Alternate turns between 'X' and 'O'.
Clicking an empty cell places the current player's mark (only if the game is not over).
Detect a winner (3 in a row) and stop further moves.
Detect a draw when the board is full and there is no winner.
Show status text (next player / winner / draw).
Include a 'Reset' button to restart the game.
Initial state shows an empty board and indicates 'Next: X'.
Turns alternate X then O.

Mini snippet (usage only)

// Example usage
const input = /* tic-tac-toe (component state + winner detection) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.