React Hooks

Big Head
  • 👀 View the deployed code on Github.
  • Not happy with the solution? 🐞🐛 Suggest a change.
  • Grammar errors? ✏️ Edit this page.

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

  • Kent C Dodds: UseLocalStorage Implementation
  • usehooks.com: useLocalStorage
  • donavon/use-persisted-state
  • Josh W Comeau: Persisting React State in localStorage
  • localStorage in JavaScript: A complete guide
  • Using custom hooks to reduce component complexity