Component State in React

States in React, similar to props, are objects that are useful to store information and influence how the component renders or carries on. Not like props, states can be managed totally inside within the component and can be changed anytime by using "setState". 

Any kind of adjustment/change made in the state for the React component can affect the total, client activities, client action or API request.

We can set initial state, access it and update it :

In the above code, we are setting the initial state of the component.

States are like just JavaScript Objects, that’s why “this.state” it is equal to an object: 

 

How to Access component states ?

As above mention it’s equal to an object , so we can access it like any other objects : this.state.property

To access the state mentioned in above example, this how we can do this:

 

Difference of state and props

• Props are unchanging for example when set the props can't be changed, while State is a recognizable object that will be utilized to hold information that may change after over time and to control the conduct after each change. 

• States must be utilized in Class Components while Props don't have this impediment. 

• While Props are set by the parent , State is for the most part refreshed by event handlers.

Presently we have taken in the essential knowledge of State and aware how it is different from Props. We have additionally observed a couple of spots where we can utilize State now all that is left is to think about the essential convention of utilizing the React State before actualizing one for ourselves.

 

 Updating Component state

In spite of the fact that it is possible to write to this.state from anyplace in your code, it won't immediately re-render, and this would lead to unstable or incorrect state values when you attempt to get to the qualities through "this.state". 

Component's constructor method is the only right place you should write it directly

Using the setState() method wherever else, doing so will acknowledge an object that will be added up in the component state

 

Introducing the setState()

setState() method changes the state object of component’s and tells React that this component and everything related to it needs to re-render with the updated state.

React deliberately "pauses" until all components call setState() in their event handlers before beginning to re-render. This lifts the execution by keeping away from unnecessary re-renders. 

Realize that setState() can be considered as a request rather than considering it as a prompt command to refresh the component

 

Using setState() in React Lifecycle Methods

Calling the seState() methods needs to be taken care of to avoid danger in React’s lifecycle methods. In some methods calling setState() method may lead to undesirable output.

 

render()

It may produce infinite loops if you call this seState() method in here. The render() method does not modify or updates the component state.It never directly interacts with the browser.

You should avoid using seState() here.

 

constructor()

If the component needs to use the local state, you can assign the initial state using this.state directly in the constructor() method. You should not call the setState() in this constructor() method

 

componentDidMount()

This function is executed right after the render function () i.e right after the component is mounted on the DOM.You may call setState() promptly in componentDidMount(). It will trigger an additional rendering, however it will occur before the program refreshes the screen in this manner render() will be called twice.

 

componentDidUpdate()

This function is called on after the component is re-rendered i.e it gets called once after the render() function is executed after the state and props gets updated.You may call setState() quickly here, however realize that it must be enclosed by a condition , or you'll cause a infinite loop.

 

componentWillUnmount()

componentWillUnmount called before the component is unmounted from the DOM which means it is called once right before, you should never call setState() here  when the component is about to vanish from the web page and this indicates the end of the cycle

 

Conclusion

• setState() is async, which means there is no assurance that the state has been updated if we attempt to use the value immediately

• In React you can only change state using setState() else React will not react to this.