React useState: A Recap

React js

During the past couple of months, I’ve been diving into React and built some simple applications. One concept I’ve been having a hard time digesting is the one of React State. I recently stumbled on an excellent tutorial (which I highly recommend) that clearly explains it. In this brief article, I will try to summarize the most important concepts I have learned while following the tutorial so that it might be helpful for others as well :-)

What is state in React? The state of a component is the data that is being used and rendered inside our component at a particular time.

In the code below we create a variable (iceCreamFlavor) and assign to it an initial value of “chocolate”. This variable is rendered inside our component template by using the curly braces {iceCreamFlavor}. We would expect that by clicking on the button “Click me” the ice cream flavor would change from “chocolate” to “strawberry”…After all that is what the handleClick function does…

const MyComponent = () => {
let iceCreamFlavor = "chocolate";
const handleClick = () => {
iceCreamFlavor = "strawberry";
};
return (
<div className="container-style">
<h2>Ice cream flavor</h2>
<p>{iceCreamFlavor}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};

And…nope. When we click nothing happens. Interestingly though, if we console.log the iceCreamFlavor after clicking on the button, indeed the value has changed from “chocolate” to “strawberry” but only in the console.

The value changes but it is not rendered to the component. Why is it so?

This is because iceCreamFlavor is not a reactive variable and therefore its change doesn’t trigger React to re-render the component template.

To make the value reactive, we need to use the useState hook which is a special type of function.

By writing:

useState("chocolate")

we can make the value “chocolate” reactive.

“chocolate” is the initial value that is rendered inside the component by using the curly braces. The hook is not complete yet though. To finalize it we also need:

1. a “place” to store this value. In this case, we will use “iceCreamFlavor” (note that this variable name is arbitrary).
2. a function that will be responsible for updating the value “iceCreamFlavor”, in this case “setIceCreamFlavor”. Normally the function name starts with “set” followed by whatever is the name of what we are updating.

const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)

Note that at the beginning, when we first render our component, the value of the iceCreamFlavor variable is “chocolate”. setIceCreamFlavor is what triggers the template re-rendering allowing the user to see the updated value.

If we add the hook to our code, the final code will look like this:

const Home = () => {
  const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)
  
  const handleClick = () => {
    setIceCreamFlavor("strawberry");
  };
return (
 <div className="container-style">
 <h2>Ice cream flavor</h2>
 <p>{iceCreamFlavor}</p>
 <button onClick={handleClick}>Click me</button>
 </div>
 );
};

When we click on the button “click me”:

1. the handleClick function is fired.
2. setIceCreamFlavor is also fired and this will change the ice cream flavor from “chocolate” to “strawberry” while also triggering the template re-render.

We can now see that the ice cream flavor has changed in our browser.!

A couple of side notes about this hook:

• useState can be used as many times as we want in one component.
• In order to use this hook, it needs to be imported like follows at the beginning of our component:

import { useState } from “react”;

Another use case of useState could be, for example, whenever we want to delete an element from our page. Imagine we trigger a function to delete an item from a list, in this case we would need to make that value reactive so that React would re-render the page featuring our list without the item we have deleted.

I hope this article has helped you to understand a bit more the concept of useState. In the future, I will try to write more articles like this as my career as a front-end developer progresses :-).