React Mastery / React Hooks

useState with Array

🔹 What is useState with Arrays?

In React, useState can store arrays when you need to manage a list of data, such as:

  • Todo lists

  • Shopping carts

  • Users list

  • Dynamic UI elements

⚠️ Arrays in state should never be mutated directly.

🔹 Basic Syntax

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

  • items → current array

  • setItems → function to update array

  • Updating state replaces the old array

🔹 Simple Example

import { useState } from "react";

function Fruits() {
  const [fruits, setFruits] = useState(["Apple", "Banana"]);

  return (
    <div>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>

      <button onClick={() => setFruits(["Apple", "Banana", "Orange"])}>
        Add Orange
      </button>
    </div>
  );
}

🔹 Adding Items to an Array

✅ Correct Way (using spread operator)

setItems([...items, newItem]);

Example

const addItem = () => {
  setFruits([...fruits, "Mango"]);
};

🔹 Using Functional Update (Best Practice)

setItems(prevItems => [...prevItems, newItem]);

✅ Why?

  • Uses latest state

  • Avoids stale state bugs

  • Recommended for real apps

🔹 Removing an Item from Array

const removeItem = (itemToRemove) => {
  setItems(items.filter(item => item !== itemToRemove));
};

Example

<button onClick={() => removeItem("Apple")}>
  Remove Apple
</button>

🔹 Updating an Item in an Array

Example: Update by index

const updateItem = (index) => {
  setItems(items.map((item, i) =>
    i === index ? "Updated Item" : item
  ));
};

🔹 Updating Object Inside an Array

const [users, setUsers] = useState([
  { id: 1, name: "Alex" },
  { id: 2, name: "John" }
]);

const updateUser = (id) => {
  setUsers(users.map(user =>
    user.id === id ? { ...user, name: "Mike" } : user
  ));
};

🔹 Clearing the Array

setItems([]);

🔹 Common Mistakes

❌ Mutating Array Directly

items.push("New Item");
setItems(items); // ❌ wrong

❌ Using Index as Key (Anti-pattern)

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

✔️ Use unique IDs instead

🔹 Correct Way to Use Keys

items.map(item => <li key={item.id}>{item.name}</li>)

🔹 When to Use Array State?

✅ Use when:

  • Managing dynamic lists

  • Rendering repeated components

❌ Avoid when:

  • State becomes deeply nested → split state or use reducer

🔹 State Used

State

Purpose

todos

Stores todo list

text

Input value

editId

Tracks which todo is being edited

🧠 Key Concepts Used

  • useState with array of objects

  • Controlled inputs

  • Conditional rendering

  • map() & filter()

  • Immutable state updates