State Changes in React
One of the most important things to remember about using state properly in React is to always avoid changing state directly. For example, you would not do the following:
this.state.comment = 'Hey!'; this is really wrong!
this.setState({comment: 'Hey!'}); this is how you do it!
this.state can only be assigned in the constructor like so:
Since state updates may be asynchronous,
React may batch multiple setState() calls into a single update for performance. Therefore, their values are unreliable for calculating the next state. Due to this limitation, we can use another form of setState() that accepts a function rather than an object as shown below. The function arguments passed in are 1.) the previous state and 2.) the props at the time the update is applied:
State Updates are Merged
When setState() is called, React merges the object provided into the current state. The below code shows how state is updated when it contains more than one independent variables. In this example we have the state set to two independent empty array variables, posts and comments:
What’s happening above is a shallow merge where this.setState({comments}) does not alter this.state.posts, but instead completely replaces this.state.comments. this.setState() is updating each independent state variable individually so that it does not alter the other.
One-Way Data Flow in React
Parents and child components are unaware if a certain component is stateful or stateless, and since it is local to the component, it is only accessible to the one that both owns and sets it. The way to get the state to a component’s children is to pass it down as props. This unidirectional data flow is a key attribute of React where the parent component owns and alters the state, while the children of that component, which lie below the parent in the component tree, can receive the state as props. The children can not reach up into the parent component to alter state. Instead, they receive the state from the parent component as props or properties. Props in React are never modified by the component and must act like pure functions with respect to their props. This means that all functions related to props must not attempt to change their inputs, and always return the same result for the same inputs. That is the essence of a “pure” function. In addition, the state of the parent component only impacts those components which are below it in the state tree hierarchy.
React Controlled Components
In React, mutable state is typically kept in the state property of components and is only updated with setState(). A controlled form is a form that derives its input values from state. In the code below, we are explicitly setting the value of the component and are updating that value in response to changes the user makes. I am setting value={this.state.name}on line 39 and value={this.state.checked}on line 44. The onChange event handler is referencing the handleChange function, which updates state through this.setState(), setting the name to the value of what the user typed in the input. Notice that the onChange event handler onChange={this.handleChange} is written in a similar syntax as a React prop. I am initially setting the name property on the state to an empty string. When the user enters something into the input, that value is captured and set as the new state through the handleChange arrow function and this.setState(), which triggers a re-render. Reference binding and this from my previous blog post. In my controlled component below, with regard to the submitted form, the whole state object is simply the controlled form data. This entire object is sent via a POST request to the back end. All of the controlled inputs, which comprise state value, within the <form> tags are sent by the handleSubmit function to the backend through the POST request as demonstrated in the below code.
