Everything you need to know about React’s useState Hook

What is useState? useState is React Hook that allows you to add state to a functional component. It returns an array with two values — the current state and a function to update it. The Hook takes an initial state value as an argument and returns an updated state value whenever the setter function is called.

🥷 No worries, It very easy to use, and it can also be used to achieve a lot due to it asynchronous nature.

TLDR:

Different ways to create a state

• States in most times are created as variables.

import * as React from "react";

export function App() {
  const [likes, setLikes] = React.useState(0);

  return (
    <div>
      <p>Likes: {likes}</p>  
    </div>
  );
}

• State can also be created as a callback function.
  This choice depends on whether the initial state should rely on computation, often referred to as lazy evaluation.

Note: The created function doesn’t get re-run when the component gets re-rendered. in other words, it stays the same between renders.

import * as React from "react";

// Assuming we're loading the initial like count from localstorage.
export function App() {
  const [likes, setLikes] = React.useState(() =>
    JSON.parse(localStorage.getItem("likes"))
  );

  return (
    <div>
      <p>Likes: {likes}</p>  
    </div>
  );
}

Different ways to update a state

You can update a state by passing a single value to the setter function.

import * as React from "react"

export function App() {
  const [likes, setLikes] = React.useState(0);

  return (
    <div>
      <p>Likes: {likes}</p>
      <button onClick={setLikes(likes + 1)}>Increment</button>
    </div>
  );
}

This isn’t the best way to update states, because we aren’t adding the new like to the already existing ones.
Suppose the likes is 4, and we want to create a function for some super-users with the ability to give a post 2 likes at a time. We may think about writing the updater function this way

import * as React from "react"

export function App() {
  const [likes, setLikes] = React.useState(0);

   function handleSuperUserUpdate() {
    setLikes(likes + 1);
    setLikes(likes + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleSuperUserUpdate}>Increment</button>
    </div>
  );
}

Now, what happens when a super user attempts to like a post? Well, initially, it updates the likes the first time with a value (i.e., when it calls setLikes(likes + 1)). Then, it repeats the same process again, in the same sequence. Finally, it sets the likes to the result of the last fired setter.

And.. that’s not what we want, we want to add the new value the whatever previous likes value were’.

This is where we need to use callbacks, just like we used a callback to initiate a state, we can also use them to update a state.

import * as React from "react"

export function App() {
  const [likes, setLikes] = React.useState(0);

   function handleSuperUserUpdate() {
    setLikes((likes) => likes + 1);
    setLikes((likes) => likes + 1);
  }

  return (
    <div>
      <p>Likes: {likes}</p>
      <button onClick={handleSuperUserUpdate}>Increment</button>
    </div>
  );
}

All it tells React is to take the previous value from the callback and add the new value to it

Again, what should happen when a super user attempts to like a post?

Firstly, it updates the like count with the previous value, using setLikes((likes) => likes + 1), then the likes get set to 1.

Subsequently, it invokes the same function with the previous value of likes (which is 1), adding 1 to it, resulting in 2.

And.. there you go with being proficient at using states in your React application. 🎉

PS: Let me know in the comments, if you want another article like this for the useEffect hook.

If you found this helpful, please consider following me on Linkedn, reacting to this post, leaving a comment, or support me by buying me a coffee through this link.