In my Phase Five project review, I was discussing a controlled form that I had created which sent data to an action creator in order to create a new workout session. In the handleChange function, I used a function called setState, and passed in an object with a key of [event.target.name] and set its value to event.target.value. My reviewer asked me what would happen if I were to, instead of using setState, set this.state directly by assigning this.state to the new state? 
(Figure 1)
As you can see, in the above screenshot in the handleChange function, we are attempting to change the state of [event.target.name] to event.target.value. The problem is, when we actually type in our input box, the new state of the form is not rendered until we refresh the page. This is the major issue that we come across when we try to mutate state, or reassign its value without using the setState() function.
The setState() function, when called, marks a react component as in need of a rerender. However, when we reassign state using 'this.state=', we are not re-rendering the component, so changes to the state will not show up in our controlled from. Furthermore, any state mutations that we make using 'this.state=' could be overwritten when we make subsequent changes using setState. Thus, it is better to never modify state directly, and instead to always use the setState function, as shown below, in figure 2, which will re-render the component on change and not lead to accidentally overwriting changes in state.
(Figure 2)
It is important to note that when we use setState() it is an asynchronous function. This means that if we try and access 'this.state' in the same function as the one in which setState() was called, we may get a result of the state before it was changed.
Another point which my project reviewer asked me to explain is why we use a spread operator to represent the rest of the state when we are processing an action in the reducer. The reason is that we are only changing the value represented by one of the keys in the store's state. In the figure below, we are using the spread operator to preserve the values of the other keys in the store's state. For example, when we dispatch an object of type 'ADD_SESSION' to the 'sessionsReducer', we return an object starting with '{...state', which here represents the rest of the state that does not have to do with the sessions key. So the existing inspirations, and personal bests, which are represented as values of other keys in the stores state (namely Bests and Inspirations), are preserved when we return the result of 'ADD_SESSION', which is shown below.
(Figure 3)
Overall I enjoyed doing the React Project, and I found Flatiron School to be a really rewarding experience. In short, I made huge strides in my web design ability in five short months and I would highly recommend that ambitious individuals with a knack for problem solving try the course.
Top comments (0)