DEV Community

Discussion on: How to use the State Hook in React

View post
Collapse
 
sabbin profile image
Sabin Pandelovitch •

A quick note only,

In your scenario

function fruitBasket = () => {
  const [numberOfFruits, setNumberOfFruits] = useState({bananas: 0, apples: 3, peaches: 2})

  //... rest of your code
}
Enter fullscreen mode Exit fullscreen mode

If you have an object inside the state, and not a plain value, and you use different handlers for updating the values, you may encounter that the following

setNumberOfFruits({ ...numberOfFruits, bananas: 2 });
setNumberOfFruits({ ...numberOfFruits, apples: 2 });
Enter fullscreen mode Exit fullscreen mode

if it's called parallel with other update functions may not always work correctly because your state object can be one behind in the moment of the function call.

In order to be sure that you update always has the last values you can use the hook with a callback

setNumberOfFruits(prevState => ({ ...prevState, bananas: 2 }));
Enter fullscreen mode Exit fullscreen mode

I've encountered this a few times to know better

Collapse
 
damcosset profile image
Damien Cosset •

That is a very good point that I forgot to mention. Thank you very much.

This is also why I always recommend to group the values that will change at the same time together, if you want to use objects in useState. If a state variable inside an object is the only one to change in an object, while the other stays the same, I prefer to put that variable in another useState call.