React Hooks

Player X, it's your turn!

Big Head

State Management Complexity

Summary: Create a user interface for tictactoe that also enables the user to go back and forward to a previous board state of a game. Make sure that you reduce state management complexity by deriving most states instead of storing them.

  • Write a user interface for Tic Tac Toe
  • Be able to pause a game, close the tab, and then resume the game later
  • Include a restart button (disabled before starting the game)
  • Display the status of the game (winner, whose turn is it, if the game is finished etc)
  • Be able to keep a history of the game; allow players to go backward and forward in time
  • Here's KCD's Implementation

My Solution

My top level component manages a simple state:

Whenever the state changes we analyze the current board with this helper function:

The top level component

The clickable tictactoe board

The buttons to go back to a previous board state

Readings