Using setState in React

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.

Defining state#

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

We’ve specified the React.Component 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 time 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 constructor we specify the initial value for our state. This is the only place where the state variable should be modified directly.

In the render function we reference the value of time from the state to display it. We access values from the state in the same way as we access props values.

Changing state#

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:

We’ve added a <button> to our component and defined the on click event handler for it. The handleClick will be called every time a user clicks on the "Refresh" button. In this function we call the setState function providing a new value for the state as a parameter. The setState function is provided by the base React.Component class. It will update the state of our component. This will trigger a new render and a user will see an updated time value.

It is also possible to call the setState 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:

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 setState call. Update only values that need to be updated and don’t specify the rest. React will merge the changes into a new state:

In this example we store two values in a state: time and userName. When we update state in handleClick function, we provide only new value for time, userName will stay the same.

Common errors when using setState#

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

Modifying state directly#

The only place where you modify your state directly is a class constructor of your component. In any other cases use setState 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.

Calling setState from render#

Specifying a new state with setState function causes a new render. If we call setState from render 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:

Note how in handleClick we reference the current value of state to define a new one. setState 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 setState function if you need to reference the current state:

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

Summary#

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 setState function.