Fire - Sandy && Water - Jessica

[jwinchan]

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?	Events and event handlers let us know when to call useState to set a new state.
What are two ways to do "dynamic styling" with React? When should they be used?	One way is to change the className in regards to the state. Another way is changing the displayed button name depending on the state.
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.	React uses event listeners to know when there's been user input, it will then change the state of the component, and then render the updated state of the component onto the browser.

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), Space complexity is O(1).
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 data would be structured as an array of components. Time complexity would be O(n). The more components there are, the more time it takes to "traverse".

[CheezItMan]

For TicTacToe we reviewed test results, the checkForWinner function, and onClickCallback function. Both functions look good and do what's required. I do want too highlight that you can dry up your checkForWinner function to use more looping and avoid manual if statements for each column.

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

[CheezItMan]

You can also do a loop to go through each column and avoid having to do a manual if statement per column.

Suggested change

	if (squares[0][0].value===squares[1][0].value && squares[2][0].value === squares[0][0].value && squares[0][0].value !== ''){
	setWinner(squares[0][0].value);
	}
	if (squares[0][1].value===squares[1][1].value && squares[2][1].value === squares[0][1].value && squares[0][1].value !== '' ){
	setWinner(squares[0][1].value);
	}
	if (squares[0][2].value===squares[1][2].value && squares[2][2].value === squares[0][2].value && squares[0][2].value !== ''){
	setWinner(squares[0][2].value);
	}
	for (let col = 0; col < 3; col += 1) {
	if (squares[0][col].value === squares[1][col].value && squares[0][col].value === squares[2][col].value && squares[0][col].value !== ''){
	setWinner(squares[0][col].value);
	}
	}