Introduction State is an attribute of React components that store property values of the component. State can be modified from inside the component and every time the state object changes, the component is re-rendered. State in Class Components Until React 16.8, state object was indigenous to class components only. We can define state object inside a class component using a constructor as shown in the below snippet. We can put as many attributes inside the state object. In the below object, state has a property {person}, which is also an object having various other properties like name, gender, etc. From React 16.8, a React Hooks were introduced to perform the same function as state in functional components [To be covered in future blogs]
State in class components
Updating the state object State object can be modified is response to an event which may be a HTML event or any API driven event. When any value in the state object changes, the component will re-render, meaning that the output will change according to the new value. How to update a property inside the state object? –> We should never update property inside a state object directly, we should always use the setState() method. The state update is explained in below steps: 1. Whenever we update the state, directly, it works quite fine and won’t produce any error, until we encounter a Pure-component somewhere in the downstream as a child component that uses the state of the parent component as a property to render itself wherever there is a change in the state of the parent component. 2. How a Pure component works is, it checks the new mutated property passed from the parent component and compares it with the old clone of the property that is present with it and renders the component only when there is a difference between the two. 3. In React, we make a shallow clone of the attributes and any change is shared across all the components in the react DOM structure. So when we mutate the state directly, we break the state object and update the state, which is reflected across the DOM structure. 4. When a Pure component compares the old and new property that is passed down from the parent component, it sees that there is no change in the property passed and hence stops the component from re-rendering. This breaks the rule, that whenever the state object changes, component should re-render. Now the question arises, how setState() method keeps account of the mutated state object? The setState() method does not immediately mutate the state but creates a pending state transition, which is an asynchronous process. Accessing this.state after calling this method can potentially return the existing value. In setState(), we don’t directly update the property inside the state but create an object separately and update the state with the object. Thereby maintaining the old state in other DOM elements as React performs shallow copy internally of the state object. For example, suppose we have an age component where we want to increase or decrease the age which is a property maintained in the state. Below is the snippet on how to do that. You can also find the source code under directory – https://github.com/Titashr/my_react_app/tree/master/src
Mutating the state
Passing state to other components The state object or even the property inside it can be passed to other components from inside the render method of the itself. The passed property of the state, appears as a prop of the child component. Below is a snippet where the state property age of the App component is passed on as a prop to the Parent component.
Passing State to other components
Conclusion In this blog, we have seen what is state, how state is updated, why we shouldn’t mutate state directly and how a state property is passed from one component to another.
コメント