Malkeet Singh

Posted on Mar 12

Build Tic Tac Toe in React (Frontend Machine Coding Interview)

#javascript #react #frontend #interview

One of the most common frontend machine-coding interview questions is surprisingly simple:

Build a Tic Tac Toe game.

It looks easy at first.

But interviewers aren't testing the UI — they're testing how you structure the solution.

In this article we'll build:

a playable Tic Tac Toe board
game state management
winner detection logic
a clean React architecture

What Interviewers Are Actually Testing

When this question appears in interviews, they care about:

component structure
state management
clean logic
edge case handling

Not just whether the game works.

Step 1: UI Layout

We need a 3×3 grid.

function Board({ board, onClick }) {
  return (
    <div className="board">
      {board.map((cell, i) => (
        <button
          key={i}
          className="cell"
          onClick={() => onClick(i)}
        >
          {cell}
        </button>
      ))}
    </div>
  );
}

Each button represents a cell.

Step 2: Manage Game State

Now we track:

board state
current player

const [board, setBoard] = useState(Array(9).fill(null))
const [player, setPlayer] = useState("X")

Step 3: Handle Cell Click

function handleClick(index) {
  if (board[index]) return

  const newBoard = [...board]
  newBoard[index] = player

  setBoard(newBoard)
  setPlayer(player === "X" ? "O" : "X")
}

This updates the board and switches the player.

Step 4: Detect Winner

Interviewers often ask candidates to implement this logic.

function checkWinner(board) {
  const lines = [
    [0,1,2],
    [3,4,5],
    [6,7,8],
    [0,3,6],
    [1,4,7],
    [2,5,8],
    [0,4,8],
    [2,4,6]
  ]

  for (let [a,b,c] of lines) {
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return board[a]
    }
  }

  return null
}

Step 5: Complete Game Component

function Game() {
  const [board, setBoard] = useState(Array(9).fill(null))
  const [player, setPlayer] = useState("X")

  function handleClick(index) {
    if (board[index]) return

    const newBoard = [...board]
    newBoard[index] = player

    setBoard(newBoard)
    setPlayer(player === "X" ? "O" : "X")
  }

  return (
    <div>
      <Board board={board} onClick={handleClick} />
    </div>
  )
}

Follow-Up Questions Interviewers Ask

After the basic implementation, interviewers usually ask improvements like:

1. Add a reset button

2. Highlight the winning line

3. Detect draw

4. Maintain move history

5. Make the board configurable (NxN)

These extensions help interviewers evaluate your design thinking.

Why This Problem Appears in Interviews

Tic Tac Toe is a great interview question because it reveals:

how you structure components
how you manage state
how you write clean logic

Even simple games can expose good or bad engineering habits.

Practice More Frontend Machine Coding Problems

If you're preparing for frontend interviews, it's helpful to practice problems like:

Tic Tac Toe
File Explorer
Nested Checkbox Tree
Autocomplete Search
Infinite Scroll Feed

I built a platform focused on these exact types of problems:

FrontendInterviews.dev

It includes:

real frontend machine-coding challenges
JavaScript interview problems
frontend system design guides

You can explore them here:

https://frontendinterviews.dev

DEV Community