Fire - Aimee & Roshni

[roshni-patel]

React Tic Tac Toe

Congratulations! You're submitting your assignment. Please reflect on the assignment with these questions.

Reflection

Prompt	Response
How are events / event handlers and useState connected?	When an event occurs, the event handler function is called and it updates the state through the useState hook. In this game, when a square is clicked on (event) the onClickCallback function is called and uses the square’s id to update its value on the board.
What are two ways to do "dynamic styling" with React? When should they be used?	The two ways to do dynamic styling with React are to use inline styles or external stylesheets. To set styles based on some condition, we can use the ternary operator or conditional rendering. For example, we used conditional rendering to display either the current player, a winner, or a tie.
Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content.	When the user clicks on a button (in this case selects a square) the callback function is called and the state of the component is updated and React can re-render the component with the updated state.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	Time complexity will be O(1) because the number of winning combinations is always 8 and the number of squares is always 9. Space complexity is also O(1) because the arrays we create always have the same amount of items (9 squares).
Consider what happens when React processes a state change from setState -- it must re-render all of the components that now have different content because of that change. What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components? Speculate wildly about what the Big-O time complexity of that code might be.	The components are objects (for example, each square has an id and value). We use loops to traverse thorough the objects and check key value pairs (for example we do this with squares to update the values). We use conditionals to verify certain information, for example, if someone has already clicked on a square or if they have won the game. The time complexity would be O(1) because we always have the same about of information we are looping through or looking up.

[kaidamasaki]

For TicTacToe we reviewed test results, the checkForWinner function, and onClickCallback function.

Good work implementing a React project using state and callback functions!

[kaidamasaki]

Oooh, snazzy winCombos array!