Skip to content

Conversation

@r-spiel
Copy link

@r-spiel r-spiel commented Dec 30, 2020

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? The event handler (for us there was one in Square component) called the event, which calls the method to change the state. For this project, it changes the state of the board, by passing in a updated square.
What are two ways to do "dynamic styling" with React? When should they be used? You can use {} for the className to have the styling change based on that js code.
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 an event is triggered (like a button click on a square), the page is rendered again with any changed data. So the input being the button click or whatever, and then re-rendering the page.

CS Fundamentals Questions

Question Answer
What do you think is the BigO complexity of the method you use to compute a winner? Time complexity is o(n) where n is the size of the 2D array. Space complexity, is a little more, we did make a flat array copy for our method to find the winner, but it's still O(n)
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.
We think it's a JS object that holds the current state and the special method to update the state. The React algorithms to traverse the object holding the state would act on the key/value pairs? Maybe is the time complexity just O(1) because it saves over the state each time?

// flatten the array of squares
const flatArray = [].concat(...squares);
// have a 2d array of combos to check
const winnerCombos = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is clever! You might also consider how you could loop through the 2D array to find rows or columns of matches.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants