Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Handle multiple state values when using useState React hook

    Tomasz ŁakomyTomasz Łakomy
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss