DEV Community

Discussion on: Let's create a tic-tac-toe with React.

lukeshiru profile image

Nice one! A few things I suggest or would do different:

  • Instead of having divs for every row, and using renderSquare, I would just map over squares and use CSS to show them as rows (with flex).
  • I would move the state to the top App, and have the Board be a stateless component receiving props and emitting events.
  • I would avoid null and just use undefined.
  • calculateWinner can be simplified drastically.
  • I would use CSS Modules instead of plain old CSS.
  • I would use more useCallback and useMemo to avoid unnecessary re-renders.
  • I would have the default state of the board in a constant so I don't have to create a new array every time the user restarts.
  • Ideally we should have every util in its own file, same for every component (I didn't did it in the example below, but is the ideal approach for bigger projects).

Here is a CodeSandbox with all the suggestions applied:


asyncnavi profile image
Navraj Sandhu Author

Thanks for suggestions.💝

Some comments have been hidden by the post's author - find out more