The nuances of useState

Naming Convention

We know useState is a Hook because it's name starts with use. All Hooks follow the same naming convention. If you want to create your own Hooks, you must follow the same convention.

Only Use it for Function Components!

You may employ useState (or any other React Hook) in a function component.

  • Don't call useState in class components.
  • Don't call useState from regular JavaScript functions.
  • Don't call useState from outside of a function component.

Moreover, do not call useState (or any React Hooks) inside loops, conditions, or nested functions.

Instead, always use Hooks at the top level of your React function, before any returns.

You can also employ React Hooks to build your own custom Hooks. However, we will not cover this topic.

Update State Based on Previous State

Similar to this.setState in class component, the "state updater function" returned from useState allows you to consume the previous state using a callback pattern as follows.

const incrementCount = () => {
  setState((count) => count + 1);
};

Using Multiple useState

In class components, the entire state lives in one (potentially large) object, this.state. However, with useState, you can use as many variables as you wish to hold the state in function components. 

const [volume, setVolume] = useState(80); 
const [playlist, setPlaylist] = useState([]);
const [currSong, setSong] = useState(""); 
const [isPlaying, setPlaying] = useState(false);

Each useState can store one value, and the value can be any JavaScript type — a number, boolean, object, array, etc.

Using an Object as State

You can use an object as the state.

const [post, setPost] = useState({
  author: "",
  content: ""
});

Let's say we want to update content! Here is how the updateContent function might look like:

const updateContent = (updatedContent) => {
  setPost((post) => ({
    author: post.author,
    content: updatedContent
  }));
}

The state updater function (setPost, here) doesn't "merge" new values with old — it overwrites (replaces) the state with the new value. This is a departure from the way this.setState worked in classes.

Resources