I love React hooks but I know that for beginners they can be a bit confusing. I remember when I first started learning them it was kind of hard to wrap my head around them. Hooks let you use state and other React features without having to write a class. They were introduced because classes can be confusing and larger components can be a bit harder to understand. The first hook I will be going over is useState. This allows you to use state in a functional component. Let’s get started!
To explain hooks I will use an example code that increments and decrements a counter. My starter code looks like this.
Right now clicking the plus or minus button won’t do anything. We need to implement the hook to allow the use of state in our functional component. One thing to know is that we cannot use React hooks in class components. Another important thing to know is that hooks should always run in the same order. That means that they cannot be written inside of conditional statements. If you do this you will get an error telling you that a React hook will let you know that a hook is being called conditionally. To use a useState hook we need to call the useState function passing in the initial value of your state. The useState function always returns an array with two values so it is commonly seen that the arr is going to be de-structured. The first value is going to be the state, which can be called whatever you choose. The second value is going to be the setState function which is going to allow you to update your state. Let’s implement that into our code.
In order to start incrementing and decrementing the counter we have to write a couple of functions that will update the state of the counter. Then we can set those functions up so that they run every time the corresponding button is clicked. Here is what that looks like.
The only thing is that this is actually the wrong way of updating the state. Instead of updating count we need to be passing in a function that takes in the prevState. Just like in class components we can pass the previous state in the function so that we can correctly update the state. This is because we are trying to update the previous state to create a new value for our current state. Check it out and you will see that clicking the buttons will still change the counter correctly. This is what the code looks like.
That is all for our counter functionality. Some other things to know about hooks is that setting the initial function can take in a function so that it will only run once when the component is rendered. This will make your application run faster depending on what kind of state you are using. Also the best thing about hooks is that we can use multiple useState hooks to keep manage multiple pieces of state. This makes each piece of state a lot easier to manage and change.
That is all for useState. It took me a while to understand it but with practice it makes much more sense and is a lot more fun to use. Next time I will be talking about how to use other hooks and what their benefits are so make sure to keep an eye out for my next post. Now go out there and have fun with hooks. Happy coding everyone! 😎
Top comments (0)