React state – Learn everything about react state

The react state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behaviour of the component. In other words, the react State of a component is an object that holds some information that may change over the lifetime of the component. In simple word, The state object is where you store property values that belongs to the component. When the react state object changes, the component re-renders.

Define State

The following sample code shows how to create a stateful component using EcmaScript2016 syntax.

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header content...",
         body: "body content"
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.body}</h2>
         </div>
      );
   }
}
export default App;

Changing the state Object

To change a value in the state object, use the this.setState() method.

When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header content...",
         body: "body content",
         count: 1
      }
   }
   
   changeData() {
      this.setState({
         header: "Header content changed at " + (new Date()).toString(),
         body: "body content changed at " + (new Date()).toString(),
         count : this.state.count + 0
      });
   }

   render() {
      return (
         <div>
            <h1>Changed {this.state.count} times</h1>
            <h1>{this.state.header}</h1>
            <h2>{this.state.body}</h2>
            <button onClick={this.changeData}>Change</button>
         </div>
      );
   }
}
export default App;

Now due to asynchronous processing, this.state.count may produce an undesirable result. A more appropriate approach would be to use the following.

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

Setting Callback

ThesetState method takes a callback as its second argument. Since setState works in an asynchronous way. That means after calling setState the this.state variable is not immediately changed. so if you want to perform an action immediately after setting state on a state variable and then return a result, a callback will be useful

this.setState({
	header: "Header content changed at " + (new Date()).toString(),
	body: "body content changed at " + (new Date()).toString(),
	count : this.state.count + 1
}, 
() => {
	console.log(this.state)	
});

When this callback fires, this.state is the updated state.

Running the App

Run application using npm start. Congrats!! See, it was easy.

Preview

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *