DEV Community

Cover image for How to use the State Hook in React

How to use the State Hook in React

Damien Cosset on December 29, 2019

Introduction Hooks have been introduced in React 16.8. This feature completely changed the way we write our components. As you may know,...
Read full 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.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
damcosset profile image
Damien Cosset •

Indeed, I talk about the disappearance of variables in the context of React components and re-rendering to explain what state is. I understand it could be difficult to understand, and I should have make it clearer in my article.

As for the fact that something new is yet added to the library, I can understand your frustration. I shared that feeling when I felt like I was finally starting to get React pre-hooks, something new was coming up... I didn't want to learn hooks until a few months ago, even after updating my React versions. I appreciate the fact that the React team added hooks without any breaking changes for my pre-hook code.

I felt like I had to learn hooks because I was working with React so much. I do enjoy the way my code looks with Hooks, compared with classes :)

Collapse
 
crashley1992 profile image
crashley1992 •

I don't know if it's just because I'm newer to React, but I feel like it's easier to keep track of state manipulation using class components than with hooks.

This helped understand hooks a lot more.

Collapse
 
damcosset profile image
Damien Cosset •

Glad it helped!

Good luck if you wish to keep going on the transition. I promise it gets better with time :D

Collapse
 
crashley1992 profile image
crashley1992 •

Thanks! I'm sure it will with more practice.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

Wonderfully explained! The useState() hook saves a ton of work related to internal states of components.