Let Me Get You Hooked On useState
Tags: beginners, react, codenewbie
Published: 2022-10-23 06:51:26

As I wrap up learning about React in Phase 2 of my program, I would like to talk about when to use the useState Hook. It was one that had me quite confused at the start of learning it, but now I think I have a better grasp on it. 

In React, there is a bunch of different hooks that you are able to implement. One in particular is the useState Hook. 

The useState Hook allows us to track state in a function component. It is dynamic in a component, meaning the data it holds changes over time as users interact with the application. The useState Hook allows us to maintain and update information or data within a component without the parent component having to be involved.

**Importing useState**

In order to use the useState Hook, you have to import a function from React called `useState`. By doing so, it allows us to connect to React's internal state inside of our function component. 

```
import React, { useState } from "react";
```

**Initializing useState**

Now the next step would be to initialize the `useState` Hook. 

```
import React, { useState } from "react";

function HeartButton() {
  const [click, setClick] = useState(false);

  return <button>{click}</button>;
}
```

**Setting State**

The example above came from my Phase 2 project. I wanted to implement a button in the shape of a heart. When the page has loaded, the heart button will appear as an outline of a heart and when the heart button is clicked, it will appear as a solid heart. By setting the initial value to false, we are telling React to create some new internal state for our component. In my case, an initial value of false, i.e. a heart outline.

The first item in the array, `click`, is a reference to the current value of that state. The second item in the array is the setter function, in our case, `setClick`. It can be called whenever we want to update the state.

```
import React, { useState } from "react";

function HeartButton() {
  const [click, setClick] = useState(false)

  function heart() {
     setClick((click) => !click)
  }

  const emptyHeart = <ion-icon name="heart-outline"></ion-icon>
  const filledHeart = <ion-icon name="heart"></ion-icon>

  return (
     <button onClick={heartButton}>
        {click ? filledHeart : emptyHeart}
     </button>
  )
}
```
When the button is clicked, it will run the `heart` function. Inside the `heart` function, it will update the value of `click` in the internal state to either be "false" or "true" depending on whether we want to like the picture or not like the picture and it will re-render our component. 

In a more elaborate version, when we click the heart button or we call the `HeartButton` function, it translate to this: 

   1. Calling `useState(true)` tells React to change our default 
   state for the `HeartButton` component's `like` value from 
   false to true.
   2. React updates its internal state
   3. React re-renders the `HeartButton` component
   4. After being re-rendered, the `useState` will return the 
   current value of React's internal state, which is now true.
   5. The value of `like` is now true with our `HeartButton` 
   component.
   6. The component's JSX uses this new value to display a solid 
   heart button.

The best part about the useState Hook is all the behind the scenes action that we no longer have to take extra steps and do manually. We no longer have to worry about finding the button element and displaying the new value, it is all done internally. React will automatically re-render the component, any child components involved, and update the DOM as long as we implement the `HeartButton` function.

**It is Asynchronous!**

One important thing about using the useState Hook is that it sets state asynchronously. When calling the `HeartButton` function, the component will finish what the current task is before updating the state. It is only a problem when using the useState Hook for values that are calculated based on the current value of state. In the case of my project, it is not a big deal, but before this tricks you, React recommends a different syntax for setting state. Here is an example, if you were to use state for a counter. 

Instead of: 

```
function increment() {
  setCount(count + 1);
}
```
Use this instead:
```
function increment() {
  setCount((currentCount) => currentCount + 1);
  setCount((currentCount) => currentCount + 1);
}
```
The callback syntax is recommended if you need to set state based on the current value of state. 

**The Rules**

Lastly, it would not be coding without any rules. The ones associated with Hooks are not actually too complicated. You can only call Hooks at the top level. It needs to live right under the start of your function component. It is invalid syntax if you call Hooks inside loops, conditions, or nested functions. The second rule for Hooks is to only call Hooks from React Functions.  They are only allowed to live in React components and are not allowed to move to regular JavaScript function.

Now that you know the ins and outs of the useState Hook, you can use it in your code with ease. Just remember that using State is only for values that are expected to change during the component's life. If not expected to change, you can freely use props to pass data from the parent component to the child component. 

**Happy Coding (:**