re: How to use the State Hook in React VIEW POST


A quick note only,

In your scenario

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

  //... rest of your code

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 });

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 }));

I've encountered this a few times to know better


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.

code of conduct - report abuse