how to update multiple state at once using react hook react.js

Question

I would like to know if I can use setState hook multiple times in same function. For example, like this

import React, { useEffect, useState } from 'react';

function(props) {
const [color, setColor] = useState(0)
const [size, setSize]= useState(0)
const [weight, setWeight] = useState(0)

const onClickRandomButton = () => {
    setColor(Math.random() * 10)
    setSize(Math.random() * 10)
    setWeight(Math.random() * 10)
}

return <div>
  <button onClick = {onClickRandomButton}>random</button>
</div>

}

I have tested, but it doesn't work as expected. To set multiple values at once using hook, how should I do? Thanks

Code works as expected: codesandbox.io/s/dazzling-hill-1ypn7 ? — LMulvey
– LMulvey, Commented Feb 28, 2020 at 1:40
Remember that setting state in React is asynchronous. If you try to operate on the new value in that same event handling function there is no guarantee that the state will have finished updating. — lawrence-witt
– lawrence-witt, Commented Feb 28, 2020 at 1:52

Hamed Navvabian · Accepted Answer · 2023-04-24 11:16:45Z

29

You can use one useState with object value for updating the styles at once:

import React, { useEffect, useState } from 'react';

export default function (props) {
  const [style, setStyle] = useState({ color: 0, size: 0, weight: 0 });

  const onClickRandomButton = () => {
    setStyle({
      color: Math.random() * 10,
      size: Math.random() * 10,
      weight: Math.random() * 10,
    });
  };
  
  return (
    <div>
      <button onClick={onClickRandomButton}>random</button>
    </div>
  );
}

And if in any method you want to update just one property, for example: color, you could do something like this:

...
  const handleEditColor = color => {
    setStyle({
      ...style,
      color
    });
  };

  // or

  const handleEditColor = color => {
    setStyle(prevState => ({
      ...prevState,
      color,
    }));
  };
...

edited Apr 24, 2023 at 11:16

answered Feb 28, 2020 at 2:10

Hamed Navvabian

8028 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahmoud Moravej Over a year ago

You should be careful of using this approach as it is always getting new value for set state function. In some rare cases, like inside useContext, it could fall into infinite loop.

skyboyer · Accepted Answer · 2020-02-28 07:57:59Z

6

I believe unstable_batchUpdates will works for hooks as well as it works for class-based components. Besides prefix unstable_ it's mentioned by Dan Abramov and in React-Redux docs so I consider it's safe to use it:

import { unstable_batchUpdates } from 'react-dom';
...

const onClickRandomButton = () => unstable_batchUpdates(() => {
    setColor(Math.random() * 10)
    setSize(Math.random() * 10)
    setWeight(Math.random() * 10)
})

answered Feb 28, 2020 at 7:57

skyboyer

24k7 gold badges65 silver badges73 bronze badges

Collectives™ on Stack Overflow

how to update multiple state at once using react hook react.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related