How to Use useState in React: The Right Way to Manage State

If you want to manage state in functional components, then useState in React is your best friend.

In this post, you’ll learn how to manage state effectively in functional components using useState with practical examples.

Before we get started, don’t forget to subscribe to my newsletter!
Get the latest tips, tools, and resources to level up your web development skills delivered straight to your inbox. Subscribe here!

Now let’s jump right into it!🚀

What is useState in React?

useState is a React Hook used to manage state in functional components.

In class components, you need to use this.state and this.setState, but in functional components, you can directly use useState.

Basic Syntax of useState in React

Before using useState, you need to import it from React:

import { useState } from "react";

Syntax:

const [state, setState] = useState(initialValue);

Here,

• state: Stores the current state value.
• setState: Function for updating the state.
• initialValue: Sets the initial or default value of the state.

useState uses array destructuring, where the first value is the state and the second is a function that updates the state.

For example:

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

In this example,

• count: Stores the current count value.
• setCount: Function for updating the count.
• 0: Sets the initial or default value of the count to 0.

Example of useState (Counter App)

Let’s understand useState with a simple counter app example.

import { useState } from "react";

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

In this example,

• The initial value is set to 0.
• The count state is updated by using the setCount.
• On each button click, the state (count) is updated, and the component is re-rendered.

useState in React with Different Data Types

With useState, you can store not just numbers but also strings, booleans, and arrays.

useState with String

function UserComponent() {
  const [name, setName] = useState("John");

  return (
    <div>
      <h1>My Name is: {name}</h1>
      <button onClick={() => setName("David")}>
        Change Name
      </button>
    </div>
  );
}

Here, the initial value is “John”, and on button click, this will change to”David”.

useState with Boolean

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      {isVisible && <h1>Hello World!</h1>}
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Visibility
      </button>
    </div>
  );
}

In this example,

• !isVisible is used to toggle the boolean.
• On button click, true and false will be toggled (true → false or false → true).

useState with Array

function ListComponent() {
  const [items, setItems] = useState(["Apple", "Banana", "Mango"]);

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => setItems([...items, "Orange"])}>
        Add Item
      </button>
    </div>
  );
}

In this example,

• To manage the state or the array, it’s a best practice to use the spread operator […].
• setItems([…items, “Orange”]) will add “Orange” while retaining the old items.

Best Practices for Updating State

Keep these practices in mind for updating the state:

Functional Updates (Using Previous State)

If the new state depends on the previous state, use a callback function.

The reason for this:

• React is asynchronous, and direct state updates can be slow.
• Functional state ensures that you work on the latest state.

For example:

import { useState } from "react";

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

  return (
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Increment
      </button>
  );
}

export default Counter;

Managing Multiple State Variables

You can manage multiple states inside one component.

For example:

import { useState } from "react";

function UserInfo() {
  const [name, setName] = useState("John");
  const [age, setAge] = useState(25);

  return (
    <div>
      <h1>Name: {name}</h1>
      <h2>Age: {age}</h2>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
    </div>
  );
}

Handling State Updates in Objects

If you are managing an object or array, then the state gets replaced, not merged.

For example:

const [user, setUser] = useState({ name: "John", age: 25 });

setUser({ age: 26 });  // This will replace the "name" field

To fix this issue, use the spread operator:

setUser(prevUser => ({ ...prevUser, age: 26 }));

This will update the age while retaining the old values.

When to Use useState in React?

• When you want to store small or medium state values.
• When re-rendering of component is needed after state change.
• When local state (not shared globally) is required.
• When you want to handle form inputs or user interactions.

For complex states, consider useReducer instead of useState.

Learn about the useEffect hook in React!

That’s all for today!

If you’re new to web development, check out Learnify — my curated platform with beginner-friendly tutorials to help you learn web development step-by-step with examples and simple explanations.

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

Enjoyed reading? You may also find these articles helpful.

14 Essential React Concepts Every Developer Must Know

14 Super Useful React Libraries You Should Know