DEV Community

Cover image for The Last ‘useState’ Explanation You’ll Ever Need!
Tyreese Wray
Tyreese Wray

Posted on • Edited on

The Last ‘useState’ Explanation You’ll Ever Need!

#webdev #react #frontend

React is one of the most popular JavaScript libraries for building user interfaces. But in this post, we’re not going to focus on everything React can do—we’re going to zero in on one of the most powerful (and sometimes confusing) features: useState.

useState is one of React’s built-in hooks that allows components to store and manage data. Whether you’re keeping track of a number, a string, an object, or even a user’s input, useState is how you do it.

This blog will walk you through what useState is, how it works, how to use it properly, and even throw in some beginner-friendly examples and analogies to help you really get it.

Core syntax/features.

What does useState do?

First thing you should know: state simply means data. It lets us store data—whether it’s an object, string, boolean, or number—and update that data when needed. That’s it. That’s the magic.

How do we use useState?

First, import it from React:

import { useState } from "react";
Enter fullscreen mode Exit fullscreen mode

Then call it inside a component:

function YourComponent() {
  const [data, setData] = useState("default value");

  return (
    <div>
      <p>{data}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Naming your state

There’s a common naming pattern people follow to keep things readable:

const [name, setName] = useState("Ty");
const [grade, setGrade] = useState("A+");
const [user, setUser] = useState({
  userName: "user1,
  email: "user1@example.com",
});
Enter fullscreen mode Exit fullscreen mode

A fun analogy

Imagine you have an alarm that wakes you up at 8AM every day. That’s your default state. But if you suddenly need to wake up at 6AM tomorrow, what do you do? You update your alarm. That’s exactly how useState works.

const [alarm, setAlarm] = useState("6AM");
setAlarm("8AM");
Enter fullscreen mode Exit fullscreen mode

A real example: A counter 

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Counter</p>
      <p>{count}</p>
      <button onClick={() => setCount((count) => count + 1)}>+</button>
      <button onClick={() => setCount((count) => count - 1)}>-</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Each time you click the button, count updates—and your UI updates with it.

Boom—you’ve got state.

Now you might be wondering…

Why use ‘useState’ to store the counter, rather than just storing it in a regular variable?

function Counter() {
  let count = 0;

    //UI is built once and `count` is set to 0 each. render.
  return (
    <div>
      <p>Counter</p>
      <p>{count}</p>
      <button onClick={() => count += 1}>+</button>
      <button onClick={() => count -= 1}>-</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

THIS IS BAD!

All this is doing is updating the count variable locally everytime we might click a button. Since count is re-initialized to 0 on render, your changes don’t stick and will not reflect on the UI so DON’T do this.

It’s important to understand that in React, we use useState instead of a normal variable because it triggers a re-render. When you update state with setState, React schedules a re-render of that component with the new state value. But if you just update a variable directly, React won’t detect the change — so the UI won’t update.

Compare and Contrast

You might be wondering: how does useState compare to the old way of handling data?

Before React (or even in vanilla JS), we used global variables or direct DOM manipulation to track things like clicks, input, or changes on the page. But with useState, everything stays local to the component, cleanly managed and automatically reflected in the UI.

Conclusion & Tips for learning useState

Learning useState is your first big step in mastering React.

Once you understand how to store and update data in a component, you’ll unlock the ability to build dynamic interfaces—like forms, counters, toggles, and more.

Tips to get better:

  • Play with useState in small projects like counters, to-do lists, or toggle buttons.
  • Follow the naming pattern: [thing, setThing]
  • Try different data types: strings, numbers, booleans, arrays, and objects
  • Read the official docs: React useState

And most importantly: break things, test things, and learn as you go.

You’ve got this!

Top comments (0)