Ren & Leah - Fire & Water

[scottzec]

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 in Square listens for the user to make a change (event, here a click) and then useState, which lives in App.js, changes the state of the board.
What are two ways to do "dynamic styling" with React? When should they be used?	We can either do in-line styling in React or we can have a separate style sheet where we call the CSS class in our render function. It's recommended that we always use external style sheets, using className.
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.	The user clicks (clicking is the event). The event handler triggers the change of the state. The App function is run, top-to-bottom, and it will re-render anything that has changed as a result of state changes in the next rendering in the DOM.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	Time Complexity: O(n) or O(1). We know that there are only 9 inputs (that will only ever be, x, o or empty string) so we won't have the case of linear expansion with increase in square size. Space Complexity: O(n) or O(1). One new data structure is created: an array that is always 9 elements long.
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 in a tree data structure. They fit into the tree data structure because a tree's nodes only pass in one direction, like props. Since it is a tree, a tree traversal would be the appropriate algorithm. We speculate that the Big(O) complexity would be O(n) for each node in the tree that is traversed.

[kaidamasaki]

For TicTacToe we reviewed test results, the checkForWinner function, and onClickCallback function. Everything looks good!

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

[kaidamasaki]

Using a loop here might have simplified logic a bit but having a bit if/else definitely works well as a way to take care of this since you know you have a constant number of squares. 😃