Conversation
ipc103
left a comment
ipc103
left a comment
There was a problem hiding this comment.
Hey @carmensalas14 - nice work on this project! I think you demonstrated really good knowledge of React hooks by including useState, useReducer, and useContext within the application. One thing to think about would be when to reach for the different hooks - in this case, you might have been able to get away with just useState or a useReducer/useContext combination. That can make things easier when your application needs to change. It might be fun to think about potentially refactoring after adding in the history feature. Feel free to let me know if you have any questions!
| @@ -0,0 +1,11 @@ | |||
| import React from 'react'; | |||
|
|
|||
| function Square(props) { | |||
There was a problem hiding this comment.
One small thing - you can use object de-structuring if you like to avoid having to say props. in the return of the function.
function Square({id, onClick, value}){| import Board from './Board'; | ||
| import './App.css'; | ||
|
|
||
| export const BoardSquareContext = React.createContext(); |
There was a problem hiding this comment.
Nice - I like the choice to use a context here. Since these both have to do with the board, I'd probably make one BoardContext that would then have multiple properties on it - one for the board array and one for the setBoard function.
<BoardContext.Provider value={{board: board, setBoard: setBoard }}| return !state; | ||
| } | ||
| }; | ||
| const [isXPlayer, dispatch] = useReducer(reducer, initialSate); |
There was a problem hiding this comment.
Nice - I like that you are using useReducer here as well, because you are demonstrating knowledge of different pieces of React. For simple pieces of state like this one though, I'd probably prefer useState since it's a little bit less complex. useReducer could be a good choice if you wanted to hoist all of this logic onto the context in the parent component.
| } | ||
|
|
||
| // function to determine winner | ||
| const findWinner = squares => { |
There was a problem hiding this comment.
For functions like this, sometimes I'll put them in a util directory to keep things organized. I also think you could make a case that this should go on the BoardContext. One way to think about a context here is that it should contain all of the logic that you need to play a game of tic tac toe. In this case, that could be:
- The state for the board
- Whose turn it is
- A way to take a turn
- A way to figure out the winner
You have all four of those in your app, they are just spread out through the different components. If they were all on the context, each component could pull off what it needed when.
Hopefully this comment makes sense - let me know if you have any follow-up questions!
| // main board component | ||
| function Board() { | ||
| const boardSquares = React.useContext(BoardSquareContext); | ||
| const setBoardSquares = React.useContext(BoardSetSquareContext); |
There was a problem hiding this comment.
Small thing, but I'd include useContext in the import statement like useReducer.
3 participants
No description provided.