React JS States

For example, we are calling the render() method explicitly, but with the help of reacting you can get the same result by using state storing the value as a member of the component’s state.

Difference between Props and React JS States

A prop is an object which holds information to control the particular component behavior which is the same as State in ReactJS. Props are commonly known as immutable i.e., set of props can’t be changed whereas State is the observable object used to hold data and can change any time and also control behavior. The States can also be used in Class Components whereas props cant not be used. The Props can be set by the parent component and State is updated by event handlers.

Conventions of State in React

The State Component can change in an entire lifetime, with some initial state which defines the state in the constructor of a Component class. The below sample format is used to define a state of a class.

State of the Class Example

Class MyClass extends React Component
{
constructor(props)
{
super(props);
this.state = { attribute : "value" };
}
}

The state should never be updated explicitly. Here React uses an observable object as the state which observes the changes in the state and also helps the component behavior.

For example, we update the state of any component like given below the webpage will not render itself because the React State will not detect the changes.

this.state.attribute = "new-value";

setState() Method Example

The React has its own methods setState(). This setState() method considers a single parameter and expects an object with a set of values to be updated. Once the update is completed the method implicitly calls render() method to repaint the page. Here is the correct method to update the value.

this.setState({attribute: "new-value"});

We can define the state explicitly in the constructor only in the initial state. The React is highly efficient and uses asynchronous state updates which is React updates multiple setState() at once. The value of the current state may not generate the required result.

For example, we want to keep a count and many of you can miswrite the code.

this.setState({counter: this.state.count + this.props.diff});

Asynchronous Process

Because of the asynchronous process, this.state.count produces an unexpected result. An appropriate approach is provided below.

this.setState((prevState, props) => ({
{ counter: prevState.count + props.diff
});

To update Counter

In this above code, using ES6 the thick arrow function format is used to take the previous state and props of the component are updating the counter. The same code can also be written as

this.setState(function(prevState, props){
return {counter: prevState.count + props.diff};
});

State Component into Account

The state updates are independent, this state object of a component contains multiple attributes and the react allows us to use the setState() method to update only a subset of attributes as multiple setState() methods to update attribute independently. For example, consider the following state component into account.

this.state = {
dark theme: False,
searchTerm: ''
};

This above code has two attributes that can be updated by a single setState() method or we can use separate setState() methods. The React internally combines setState() methods or updates the attributes needed.

Finally, we can get a clear idea of the state in React, but the constructor and render methods can add user-defined functions. We can also create user-defined functions inside a class. The react has a special method used for some proper context to solve this problem. you can also cover special functions in the Life cycle of a component.