React Hooks: useState in Depth

Introduction

The useState Hook is one of the most commonly used and fundamental Hooks in React. It allows functional components to store and manage data that can change over time.

Understanding useState in depth is essential for building interactive user interfaces such as forms, counters, toggles, and dynamic dashboards.

This article explains how useState works, different usage patterns, best practices, common mistakes, and interview points, making it suitable for beginners and working professionals.

What Is useState?

useState is a React Hook that allows you to add state to a functional component.

It returns:

1. The current state value
2. A function to update that state

Whenever the state update function is called, React re-renders the component.

Basic Syntax of useState

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

• state holds the current value
• setState updates the value
• initialValue is used only during the first render

Simple Example

import { useState } from "react";

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

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

export default Counter;

This example demonstrates how a UI updates automatically when the state changes.

Updating State Based on Previous Value

When the new state depends on the previous state, always use the functional update form.

setCount(prevCount => prevCount + 1);

This ensures reliable updates, especially when multiple updates happen together.

Using Multiple useState Hooks

You can use more than one useState in a component.

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

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Each state variable is independent and easier to manage.

Managing Objects in useState

State can hold objects, but updates must be done carefully.

function User() {
  const [user, setUser] = useState({
    name: "Shahid",
    role: "Developer"
  });

  const updateRole = () => {
    setUser(prevUser => ({
      ...prevUser,
      role: "Senior Developer"
    }));
  };

  return <p>{user.name} - {user.role}</p>;
}

Always use the spread operator to avoid overwriting existing properties.

Managing Arrays in useState

function List() {
  const [items, setItems] = useState([]);

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

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

Never modify arrays directly. Always create a new array.

Lazy Initialization of useState

When the initial state is expensive to calculate, use lazy initialization.

const [value, setValue] = useState(() => {
  return calculateInitialValue();
});

This function runs only once during the initial render.

Common Mistakes with useState

• Directly modifying state
• Forgetting to use the setter function
• Using state updates inside render
• Not using functional updates when required

useState vs this.state

Best Practices

• Keep state minimal
• Use multiple states instead of large objects
• Use functional updates for dependent values
• Lift state up when necessary

Interview Questions and Answers

What is useState in React?

useState is a Hook that allows functional components to manage state.

Does useState replace this.state?

Yes, useState replaces state handling in functional components.

Is state update synchronous?

No, state updates are asynchronous.

Can useState hold objects and arrays?

Yes, but updates must be done immutably.