useState

The useState hook is arguably the most commonly used React hook, simply because you can use it to store and manipulate state in your application. It is so common in fact, that you will rarely use another hook without also using the useState hook.

It has the following syntax:

const [stateValue, updateFunction] = useState(initialValue);

Example

import { useState } from "react";
 
export default function StateHook() {
  const [name, setName] = useState("Thomas");
 
  return <div>{name}</div>;
}

The syntax above for defining the values of the useState hook is called Array Destructuring. Destructuring means getting the values in an array or an object.

The first value, in this case: name is called the state value. This is what we will usually use to display the current value of the variable in our React application. The second value, in this case: setName is the function that controls how the state value is accessed or changed. That is, if you want to change the value of name to something else, you could do this:

function updateName() {
  setName("Sankara");
}

And that would update the state value.

The initial value of the state can be anything you need it to be for your application. See the example below:

const [name, setName] = useState("Thomas"); // A string
const [age, setAge] = useState(27); // A number
const [countries, setCountries] = useState([]); // An empty array
const [name, setName] = useState(null); // null
const [name, setName] = useState(undefined); // undefined
const [savedData, setSavedData] = useState(getLocalStorage()); // A function
const [country, setCountry] = useState({
  name: "Kenya",
  population: "50 million",
  region: "East Africa",
}); // An object

Naming conventions

You will notice that in the examples above, the update function is always prefixed with set. This is just a naming convention but you don’t have to use it. However, I recommend that you use it because thinking of unique function names becomes harder the larger your codebase becomes. But, it is completely safe to do something like this:

const [name, updateFullName] = useState("Thomas Sankara");
 
// OR THIS
const [fullName, setFullName] = useState("Thomas Sankara");

If you are new to React, I recommend using the recommended naming convention until you are comfortable working and thinking in React . This will help you to better understand and write React code.

Examples

We have already seen an example above of how you can initialize the useState hook and display its value in the UI. Here are some more examples:

Managing inputs

import { useState } from "react";
 
export default function TheStateHook() {
  const [name, setName] = useState("");
 
  return (
    <div>
      <form>
        <input
          type="text"
          name="name"
          id="name"
          placeholder="What is your name?"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </form>
 
      <p>Your name is: {name}</p>
    </div>
  );
}

Can you guess what the code above is doing? Can you visualize what the UI looks like before running the example?

Explaining the code

In the next chapter about the useEffect hook, we will use the useState hook as well to build a timer as well as to get data from an API. Check out those examples as well.