Understanding the useState Hook in React

React is one of the most popular JavaScript libraries for building modern user interfaces. One of the most important features of React is the ability to manage data that changes over time. This is where the useState Hook comes into play.

In this article, we will explore what the useState Hook is, why it is used, and how to implement it in React applications.

What is useState?

The useState Hook is a built-in React Hook that allows functional components to manage state. Before Hooks were introduced in React 16.8, state management was only possible in class components. With useState, developers can create and update state variables directly inside functional components.

Syntax

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

• state: The current state value.
• setState: A function used to update the state.
• initialValue: The initial value assigned to the state.

Importing useState

Before using the Hook, import it from React:

import React, { useState } from "react";

Basic Example

Let's create a simple counter application:

import React, { useState } from "react";

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

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

export default Counter;

How It Works

1. useState(0) initializes the state with a value of 0.
2. count stores the current value.
3. setCount() updates the value.
4. When the state changes, React automatically re-renders the component.

Managing String State

The useState Hook can also store strings.

import React, { useState } from "react";

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

  return (
    <div>
      <h2>{name}</h2>
      <button onClick={() => setName("Suraj")}>
        Change Name
      </button>
    </div>
  );
}

Managing Object State

State can store objects as well.

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

const updateAge = () => {
  setUser({
    ...user,
    age: 26
  });
};

Using the spread operator ensures that existing properties remain unchanged while updating specific values.

Managing Array State

The useState Hook can also manage arrays.

const [items, setItems] = useState([]);

const addItem = () => {
  setItems([...items, "New Item"]);
};

This creates a new array containing existing items and the newly added item.

Functional Updates

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

setCount(prevCount => prevCount + 1);

This approach is recommended because it always works with the latest state value.

Common Mistakes

Direct State Mutation

❌ Incorrect:

count = count + 1;

✅ Correct:

setCount(count + 1);

Forgetting to Preserve Object Properties

❌ Incorrect:

setUser({
  age: 30
});

✅ Correct:

setUser({
  ...user,
  age: 30
});

Benefits of useState

• Simple and easy to understand.
• Works perfectly with functional components.
• Improves code readability.
• Reduces the need for class components.
• Makes state management more efficient.

Conclusion

The useState Hook is one of the most fundamental and widely used Hooks in React. It allows developers to manage dynamic data inside functional components with minimal code. Whether you're working with numbers, strings, objects, or arrays, useState provides a clean and efficient way to handle component state.

Mastering the useState Hook is the first step toward becoming a proficient React developer and building interactive web applications.