The backbone of React: learn the useState hook

Cover by Andreas Gücklhorn on Unsplash

What are hooks

React Hooks are a powerful tool for you to manage the state and other React features with functional components. The most common one (and probably the first you learn how to use) is the useState hook.

As its name implies, the useState hook lets you save a variable with a state (or value). The state can change thanks to a setter function. Let's take a look at an example using the useState

Don't be afraid of the long code snippet. You'll get used to this syntax fast. Let's review a little bit of what's happening:

• The return statement: In React, every component it's a function. The return statement it's what the markup (or JSX to be specific) will be output to the frontend. In this case, we create a simple component that displays our name and input to change our name.
• The useState hook: Hook is just a fancy word for function. Functions that only work inside of React components. The useState function is called with one argument, the initial state. Then, it returns two things:
  • Our value (name in this example): This value can be used inside our JSX. It will display our most recent value.
  • Our setter function (setName in this example): This function will accept the new value for the name state. It can be called within user interaction or over time. It's a function that takes one parameter (that we'll discuss soon).

The useState hook has more features!

It is only the beginning of the useState hook. As simple as it looks, it has some tricks for some specific behaviors. You will not find this a lot on your code, but it's always good to know more than less!

Calculating new state with the previous state

Let's talk about a counter. If we click a button, our counter goes up. It can be achieved with a function, just increase the value of the counter with every click.

With React, you might want to do something like this:

import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div className="App">
      {counter}
      <button 
      onClick={() => setCounter(counter + 1)}>
        Increase!!
      </button>
    </div>
  );
}

This definitely works. The problem is

It works! But it is not a good practice. Every time we need our previous value, we can use a callback inside our setter function that exposes our previous value.

import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div className="App">
      {counter}
      <button 
      onClick={() => setCounter((prev) => prev + 1)}>
        Increase!!
      </button>
    </div>
  );
}

Lazy-loading initial state

Say that your initial state is part of an expensive computation. For example, you are calling a function that gets a huge array with a lot of items! Even though you update your state with the application, this initial function will be called with every re-render. We can handle this is lazy loading our initial state.

Instead of passing a function like this

const [state, setState] = useState(getALotOfItems())

We can pass a function to our useState:

const [state, setState] = useState(() => getALotOfItems())

The function is executed only once and not on every render.

Conclusion

The useState hook is one of the most powerful tools you have in React. You can create great applications with only this hook. It will track the user's input, and you can change the whole view with one function call.

I hope you learned something new, and stay tuned for the explanation of the useEffect hook!

Thanks for reading, see you soon.