Handle multiple state values when using useState React hook
Note: React hooks are currently in React v16.7.0-alpha and being discussed in an open RFC.
When using the useState hook it's important to remember that the function updating the state returned from this hook works a little different than the setState from React.Component. In this lesson we are going to learn how we can handle multiple state values when using the React useState hook following an example of a simple app with two counters to highlight possible issues we might encounter and how to solve them.
Instructor: [00:00] We want to have a simple app, where we have two buttons, one for incrementing the counter A, the other for incrementing counter B. When we click those buttons, we would like those two counters to increase.
[00:12] In order to achieve this functionality, we are going to use hooks. First, import the useState hook from React. Next, we're going to use it to create our state and our function that allows us to set the counters. We're going to call useState, and pass in an object which describes the state of our application.
[00:30] By default, we're going to have two counters, which are both set to zero. We are going to this setCounters function in both of our buttons, passing in the changed value of the counter. In both of them, we're going to update either the counter A or counter B by one.
[00:47] We're going to display the current state of both of those counters, but there's a problem with that code. If we click increment A button, we're going to see the state of the counter A is going to increase, but the state of counter B is going to be reset to null.
[01:02] It happens because the setCounters function that the useState hook returns is going to override the state with whatever we're going to pass into this function. We could fix it by using the spread operator to spread our current state in both of those objects.
[01:19] Since those counters are not going to be updated at the same time, the better solution would be to use two different useState calls, one for counter A, and another one for counter B. To make that happen first, remove those spreaded state calls.
[01:33] Instead of passing an object to this function, we are going to pass in the value incremented by one. We are also going to display those counters directly without using the state object. Now, we need to fix this by copying this, and changing state to counter A, changing another state to counter B.
[01:52] This function is going to be called setCounterA. This one's setCounterB. Instead of passing an object, we are going to simply pass in the default value, which is going to be zero in both of those cases. We need to enable this function over here as well.
[02:06] It's setCounterA, setCounterB. After we save and refresh, now, we have our desired effect. Basically, if I click increment A, the counter A is going to be incremented. If I click increment B, the counter B is going to be incremented.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!