This article shows how React components can use state to store information. This can be useful when a component needs to save some data in addition to props provided by a parent component. For example, a form component can store values entered by a user or a calendar component can store a selected date.

Let's start with an example component that stores a current date in the state and displays its value:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // initialize state object
    this.state = {
      time: new Date()
    };
  }

  render() {
    return <div>{this.state.time.toTimeString()}</div>;
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

 class as a base class for our component which gives us a support for state management.

The component’s state is an object that stores information. In the example above we define a single 

 field for our state. We can define other fields as needed. The state is available only inside a component and it's not visible to other components. In the class 

 to display it. We access values from the state in the same way as we access props values.

Now let’s take a look at how we can modify a state of a component. In the following example a user can click the "Refresh" button to update the time displayed:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      time: new Date()
    };
  }

  handleClick = event => {
    this.setState({ time: new Date() });
  };

  render() {
    return (
      <div>
        {this.state.time.toTimeString()}
        <div>
          <button onClick={this.handleClick}>Refresh</button>
        </div>
      </div>
    );
  }
}

 to our component and defined the on click event handler for it. The 

 will be called every time a user clicks on the "Refresh" button. In this function we call the 

 function providing a new value for the state as a parameter. The 

 class. It will update the state of our component. This will trigger a new render and a user will see an updated time value.

 with a function parameter instead of an object. In this case the handler function will receive the previous state and properties as parameters. It should return a new state:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      time: new Date()
    };
  }

  handleClick = event => {
    this.setState((state, props) => ({ time: new Date() }));
  };

  render() {
    return (
      <div>
        {this.state.time.toTimeString()}
        <div>
          <button onClick={this.handleClick}>Refresh</button>
        </div>
      </div>
    );
  }
}

In the example above we update the time value with a function that receives a state and properties and returns a new state.

If you store multiple values in a state, you don’t have to update them all with every 

 call. Update only values that need to be updated and don’t specify the rest. React will merge the changes into a new state:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      time: new Date(),
      userName: "Alice"
    };
  }

  handleClick = event => {
    this.setState({ time: new Date() });
  };

  render() {
    return (
      <div>
        <div>Hi {this.state.userName}!</div>
        <div>{this.state.time.toTimeString()}</div>
        <div>
          <button onClick={this.handleClick}>Refresh</button>
        </div>
      </div>
    );
  }
}

In this example we store two values in a state: 

 function, we provide only new value for 

Below are several common errors when working with a component’s state.

The only place where you modify your state directly is a class constructor of your component. In any other cases use 

 function to alter your state. If you’ll modify a state object directly, this will not trigger an update and a render, which may lead to an error state of an application.

 function causes a new render. If we call 

 function, this will cause an infinite loop.

Using state directly when setting new state

If a new state value depends on the current one, do not use the current state directly. Here’s an example of the code that may lead to errors:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clickCount: 0
    };
  }

  handleClick = event => {
    this.setState({ clickCount: this.state.clickCount + 1 });
  };

  render() {
    return (
      <div>
        <div>Clicked {this.state.clickCount} times</div>
        <div>
          <button onClick={this.handleClick}>Click me</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

 we reference the current value of state to define a new one. 

 is asynchronous function, which means that this code may lead to an error. To correctly change the state, use function as a parameter for the 

 function if you need to reference the current state:

handleClick = event => {
  this.setState((state, props) => ({
    clickCount: state.clickCount + 1
  }));
};

This way you’ll ensure the right value for your new state.

In this article we’ve seen how we can make React components better with state. The state can store information that is available only inside a component and can be updated with the 

AUTHOR

Dmitry Rogozhny

This article shows how React components can use state to store information. This can be useful when a component needs to save some data in addition to props provided by a parent component. For example, a form component can store values entered by a user or a calendar component can store a selected…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Using setState in React

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript