Let Me Get You Hooked On useState

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 (: