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:
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.
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.
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:
userName. When we update state in
handleClick function, we provide only new value for
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
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.
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