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 

<h1 data-node-type="titlePlaceholder">Using setState in React</h1><p>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.</p><h2>Defining state</h2><p>Let's start with an example component that stores a current date in the state and displays its value:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-Crbfz" id="cm-Crbfz">class MyComponent extends React.Component {
  constructor(props) {
    super(props);

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

  render() {
    return &lt;div&gt;{this.state.time.toTimeString()}&lt;/div&gt;;
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FyLyVwjb%3Fheight%3D600%26slug-hash%3DyLyVwjb%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FyLyVwjb%3Feditors%3D0010&amp;image=https%3A%2F%2Fscreenshot.codepen.io%2F3885452.yLyVwjb.small.23e641bd-ced9-4a05-9e7c-ddd380dafba7.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We’ve specified the <code>React.Component</code> class as a base class for our component which gives us a support for state management.</p><p>The component’s state is an object that stores information. In the example above we define a single <code>time</code> 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 <code>constructor</code> we specify the initial value for our <code>state</code>. This is the only place where the <code>state</code> variable should be modified directly.</p><p>In the <code>render</code> function we reference the value of <code>time</code> from the <code>state</code> to display it. We access values from the state in the same way as we access props values.</p><h2>Changing state</h2><p>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:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-SlhrK" id="cm-SlhrK">class MyComponent extends React.Component {
  constructor(props) {
    super(props);

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

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

  render() {
    return (
      &lt;div&gt;
        {this.state.time.toTimeString()}
        &lt;div&gt;
          &lt;button onClick={this.handleClick}&gt;Refresh&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FPowWENZ%3Fheight%3D600%26slug-hash%3DPowWENZ%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FPowWENZ%3Feditors%3D0010&amp;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fm.cdpn.io%2Fscreenshot-coming-soon-small.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We’ve added a <code>&lt;button&gt;</code> to our component and defined the on click event handler for it. The <code>handleClick</code> will be called every time a user clicks on the "Refresh" button. In this function we call the <code>setState</code> function providing a new value for the state as a parameter. The <code>setState</code> function is provided by the base <code>React.Component</code> class. It will update the state of our component. This will trigger a new render and a user will see an updated time value.</p><p>It is also possible to call the <code>setState</code> 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:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-uNhnx" id="cm-uNhnx">class MyComponent extends React.Component {
  constructor(props) {
    super(props);

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

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

  render() {
    return (
      &lt;div&gt;
        {this.state.time.toTimeString()}
        &lt;div&gt;
          &lt;button onClick={this.handleClick}&gt;Refresh&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FKKwaZWX%3Fheight%3D600%26slug-hash%3DKKwaZWX%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FKKwaZWX%3Feditors%3D0010&amp;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fm.cdpn.io%2Fscreenshot-coming-soon-small.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In the example above we update the time value with a function that receives a state and properties and returns a new state.</p><p>If you store multiple values in a state, you don’t have to update them all with every <code>setState</code> call. Update only values that need to be updated and don’t specify the rest. React will merge the changes into a new state:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-46lp3" id="cm-46lp3">class MyComponent extends React.Component {
  constructor(props) {
    super(props);

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

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

  render() {
    return (
      &lt;div&gt;
        &lt;div&gt;Hi {this.state.userName}!&lt;/div&gt;
        &lt;div&gt;{this.state.time.toTimeString()}&lt;/div&gt;
        &lt;div&gt;
          &lt;button onClick={this.handleClick}&gt;Refresh&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FQWwdagM%3Fheight%3D600%26slug-hash%3DQWwdagM%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FQWwdagM%3Feditors%3D0010&amp;image=https%3A%2F%2Fscreenshot.codepen.io%2F3885452.QWwdagM.small.b8b096cd-2e7b-4910-acbe-fb11ddad60b5.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example we store two values in a state: <code>time</code> and <code>userName</code>. When we update state in <code>handleClick</code> function, we provide only new value for <code>time</code>, <code>userName</code> will stay the same.</p><h2>Common errors when using setState</h2><p>Below are several common errors when working with a component’s state.</p><h3>Modifying state directly</h3><p>The only place where you modify your state directly is a class constructor of your component. In any other cases use <code>setState</code> 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.</p><h3>Calling setState from render</h3><p>Specifying a new state with <code>setState</code> function causes a new render. If we call <code>setState</code> from <code>render</code> function, this will cause an infinite loop.</p><h3>Using state directly when setting new state</h3><p>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:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-shgll" id="cm-shgll">class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clickCount: 0
    };
  }

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

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

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FxxbgpPB%3Fheight%3D600%26slug-hash%3DxxbgpPB%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FxxbgpPB%3Feditors%3D0010&amp;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fm.cdpn.io%2Fscreenshot-coming-soon-small.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>Note how in <code>handleClick</code> we reference the current value of state to define a new one. <code>setState</code> 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 <code>setState</code> function if you need to reference the current state:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-SbC29" id="cm-SbC29">handleClick = event =&gt; {
  this.setState((state, props) =&gt; ({
    clickCount: state.clickCount + 1
  }));
};</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FvYEgprL%3Fheight%3D600%26slug-hash%3DvYEgprL%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FvYEgprL%3Feditors%3D0010&amp;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fm.cdpn.io%2Fscreenshot-coming-soon-small.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>This way you’ll ensure the right value for your new state.</p><h2>Summary</h2><p>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 <code>setState</code> function.</p>

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