How do I.... useState?

Hey Its me back again with another React Hook blog, this time its useState!

What is useState?

well as I mentioned earlier, useState is a react hook that lets you access state in functional components, if you were not aware functional components don't have access to a state! however the useState hook lets you work around this.

Step 1, import useState

This is a simple step and it gives you access to the useState library

you could simply say React.useState() every-time, however that can be bothersome so when you import React you can destructure(which is not a real word btw..) by going

Import React, {useState} from 'react';

this is basic stuff but now every-time you want to use the function you have access to it as useState.

Step 2, how do you use it?

Using this hook is almost as simple as importing it..

So theres two things you can notice right off the bat, there is an array in this case we have a count and a setCount function, and basically what this does is the first value of the array is what is being stored in the state in this case we are storing some count,

and the setCount is a function(which can be named anything "updateCount" "blah" anything..) we are assigning to the count value in state and we are saying every-time I use setCount, do this with that state... and update the value of count...

for example if I have a button that increases the count every time you click it, all you have to do is...

simply "set the count" to whatever the original count is +1, you may find this similar the setState function in class functions, and thats because thats exactly what it is doing, except this setCount is specific to the count value in state..

Step 3, updating multiple Values at once

Unlike this.setState() where it automatically merges the rest of the state... you can run into a problem where if you have multiple counts for example..

well now if you try to update the state you need to change the function otherwise it won't know which count to update, and even worse it'll reset the value of the second one unless you merge the state

so you can fix this issue like this..

now,
it first gets the state of everything,
then it knows to update the first count (once again currentState can be called anything, "state" , "blah" you're just saying take the state and only update this one value)

and to simply just replace the rest of the values with the original data.. now if I click the button it will still increase the value that is specified in this case just count...

however another great thing about useState is you can call it anywhere and call multiple useStates for multiple different values..

so now count2 isn't affected unless you call the setCount2 function because that is the only updater function tied to that value in state!

Thats it for my quick introduction to useState.. I hope it is helpful..

its very easy to use and is usually the base for a lot of custom Hooks which I may talk about in my next blog!