Handle User Input by Adding State to the Tic-Tac-Toe Grid with React useReducer
In order to update our UI when a user interacts with the buttons, we need to store and update the tic-tac-toe grid data somehow. We're going to use the React.useReducer hook to accomplish this.
With this hook, we are able to store some data (including our grid) and define actions that update that data. We'll work on adding a CLICK case to our reducer that will update the grid with either an X or an O according to whose turn it is.
Hello! Thanks for the nice course. Why don't use the object spread syntax instead of the clone function? I thought that is a general practice that I have seen in other courses. I found some other recommendations such as Object.Assign( {}, obj ), but in general I have seen the spread syntax being used in other courses.
Hello! Thanks for the nice course. Why don't use the object spread syntax instead of the clone function? I thought that is a general practice that I have seen in other courses. I found some other recommendations such as Object.Assign( {}, obj ), but in general I have seen the spread syntax being used in other courses.
The answer is simple. The spread operator will only do a shallow clone of an object's properties. If a property's value is another object, that reference hasn't changed. You now risk accidentally mutating an existing object. Using the clone function is a creates a deep clone of the entire object. This means that objects, arrays and other data structures have completely new references, and therefore, you won't mutate an existing object accidentally.
Hello Kyle! OK, got it. So there is a new object created in the shallow copy case (spread operator), but if the property is another object it would be mutated. Very interesting, this has not been emphasised in many other courses so far and the spread operator is widely used. Thanks for the insight and the quick answer! Happy holidays!