Updating Arrays in State in React JS

Updating Arrays in State is an important concept in React JS that explains how to add, remove, replace, and modify items in an array stored in component state. React recommends treating arrays in state as immutable, which means creating a new array whenever you need to update the existing data.

These techniques are useful for building shopping carts, to-do lists, employee lists, product catalogs, dashboards, and other interactive React applications.

Course: JustAcademy React JS Training Course

Course Demo: Register for React JS Course Demo

1. What Is an Array in JavaScript?

An array is a data structure used to store multiple values in a single variable. Arrays can contain strings, numbers, objects, booleans, or other arrays.

Example:

const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

In React, arrays are commonly used to store lists of products, users, tasks, messages, and other collections of data.

2. What Is State in React?

State is data managed by a React component. When state is updated correctly, React can render the component again to display the latest data.

The useState() Hook allows functional components to create and manage state.

Syntax:

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

• state: Stores the current value.
• setState: Function used to request a state update.
• initialValue: Initial value of the state.

Example:

import { useState } from "react";
function FruitList() {
  const [fruits, setFruits] = useState(["Apple", "Banana"]);
  return (
    <div>
      {fruits.map((fruit) => (
        <p key={fruit}>{fruit}</p>
      ))}
    </div>
  );
}
export default FruitList;

Here, the fruits state stores an array of fruit names, and the setFruits function updates that array.

3. What Does Updating Arrays in State Mean?

Updating arrays in state means creating a new array that reflects the required changes and passing it to the state setter. You might need to add a new item, remove an item, update an existing item, insert an item at a specific position, or reorder items.

React recommends avoiding direct mutation of arrays stored in state. Instead, use techniques such as spread syntax, map(), filter(), and slice() to create new arrays.

Example:

const [fruits, setFruits] = useState(["Apple", "Banana"]);
function addFruit() {
  setFruits([...fruits, "Mango"]);
}

The spread syntax copies the existing elements into a new array, and the new fruit is added at the end.

4. Why Should We Avoid Mutating Arrays in State?

Mutation means changing an existing array instead of creating a new one. Methods such as push(), pop(), shift(), unshift(), and splice() can modify the original array.

Incorrect Example:

const [fruits, setFruits] = useState(["Apple", "Banana"]);
function addFruit() {
  fruits.push("Mango");
  setFruits(fruits);
}

This code modifies the existing array and passes the same array reference back to React. React may skip the update because the reference has not changed, so the UI might not update as expected.

Correct Example:

const [fruits, setFruits] = useState(["Apple", "Banana"]);
function addFruit() {
  setFruits([...fruits, "Mango"]);
}

This creates a new array and passes it to the state setter, allowing React to recognize the changed state.

5. Adding Items to an Array Using Spread Syntax

The spread syntax (...) copies the elements of an existing array into a new array. You can add new elements at the beginning or end without mutating the original array.

Adding an Item at the End:

import { useState } from "react";
function FruitList() {
  const [fruits, setFruits] = useState(["Apple", "Banana"]);
  function addFruit() {
    setFruits([...fruits, "Mango"]);
  }
  return (
    <div>
      <button onClick={addFruit}>Add Fruit</button>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={`${fruit}-${index}`}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}
export default FruitList;

When the button is clicked, Mango is added to the end of the array and appears in the list.

Adding an Item at the Beginning:

setFruits(["Orange", ...fruits]);

This places Orange before the existing elements.

Using concat():

setFruits(fruits.concat("Grapes"));

The concat() method returns a new array containing the existing elements and the new item.

6. Removing Items from an Array Using filter()

The filter() method creates a new array containing only the elements that satisfy a condition. It is a common way to remove items from React state.

Example:

import { useState } from "react";
function TodoList() {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Learn React" },
    { id: 2, title: "Practice JavaScript" },
    { id: 3, title: "Build a Project" }
  ]);
  function deleteTask(id) {
    setTasks(tasks.filter((task) => task.id !== id));
  }
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          {task.title}
          <button onClick={() => deleteTask(task.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}
export default TodoList;

When Delete is clicked, the matching task is excluded from the new array. The other tasks remain unchanged.

7. Updating an Existing Item Using map()

The map() method creates a new array by transforming each element. It is useful when you want to update a particular item while keeping the remaining items unchanged.

Example:

import { useState } from "react";
function CounterList() {
  const [counters, setCounters] = useState([0, 0, 0]);
  function incrementCounter(indexToUpdate) {
    setCounters(counters.map((counter, index) =>
      index === indexToUpdate ? counter + 1 : counter
    ));
  }
  return (
    <ul>
      {counters.map((counter, index) => (
        <li key={index}>
          {counter}
          <button onClick={() => incrementCounter(index)}>+1</button>
        </li>
      ))}
    </ul>
  );
}
export default CounterList;

Each button increases only the corresponding counter. The other counters retain their current values.

8. Updating Objects Inside an Array

Arrays in React often contain objects. When updating a property inside one object, create a new array with map() and create a new object for the item being changed.

Example:

const [users, setUsers] = useState([
  { id: 1, name: "Amit", active: false },
  { id: 2, name: "Priya", active: false }
]);
function activateUser(userId) {
  setUsers(users.map((user) =>
    user.id === userId
      ? { ...user, active: true }
      : user
  ));
}

The spread syntax (...user) copies the selected user's existing properties, and active: true updates the property. Other user objects are returned unchanged.

Important: Copying only the array is not enough if you then mutate an object inside it. The array copy is shallow, so its elements may still reference the original objects.

9. Inserting Items at a Specific Position Using slice()

The slice() method returns a portion of an array without modifying the original array. Combined with spread syntax, it can insert an item at a chosen position.

Example:

const numbers = [10, 20, 40, 50];
const insertAt = 2;
const updatedNumbers = [
  ...numbers.slice(0, insertAt),
  30,
  ...numbers.slice(insertAt)
];
console.log(updatedNumbers);

Output:

[10, 20, 30, 40, 50]

To update React state, use the same approach inside the setter:

setNumbers([
  ...numbers.slice(0, insertAt),
  30,
  ...numbers.slice(insertAt)
]);

10. Sorting and Reversing Arrays Safely

The sort() and reverse() methods mutate the array on which they are called. To use them with state, copy the array first.

Reversing an Array:

setFruits([...fruits].reverse());

Sorting an Array:

setFruits([...fruits].sort());

These examples create a copy before applying the mutating method. For numeric sorting, provide a comparison function:

setNumbers([...numbers].sort((a, b) => a - b));

For arrays containing objects, remember that copying the array does not copy each object. Avoid modifying object properties in the copied array unless you have created new objects for the items being changed.

11. Using Functional State Updates

When the next array depends on the previous state, a functional updater is often a good choice. React passes the latest pending state value to the updater function.

Syntax:

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

Example:

function addTask(newTask) {
  setTasks(previousTasks => [...previousTasks, newTask]);
}

This approach is particularly useful when multiple state updates may be queued or when the next state must be calculated from the previous state.

12. Complete Practical Example: To-Do List

This example demonstrates adding and removing tasks using immutable array updates.

import { useState } from "react";
function TodoApp() {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState([]);
  function addTask() {
    const trimmedTask = task.trim();
    if (trimmedTask === "") return;
    setTasks(previousTasks => [
      ...previousTasks,
      { id: crypto.randomUUID(), title: trimmedTask }
    ]);
    setTask("");
  }
  function deleteTask(id) {
    setTasks(previousTasks =>
      previousTasks.filter((item) => item.id !== id)
    );
  }
  return (
    <div>
      <h2>My To-Do List</h2>
      <input
        value={task}
        onChange={(event) => setTask(event.target.value)}
        placeholder="Enter a task"
      />
      <button onClick={addTask}>Add Task</button>
      {tasks.length === 0 ? (
        <p>No tasks added yet.</p>
      ) : (
        <ul>
          {tasks.map((item) => (
            <li key={item.id}>
              {item.title}
              <button onClick={() => deleteTask(item.id)}>Delete</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
export default TodoApp;

How it works:

1. The input stores the task title.
2. Clicking Add Task creates a new task object and adds it to a new array.
3. The input is cleared after a task is added.
4. Each task is rendered using map() with a stable unique ID as its key.
5. Clicking Delete uses filter() to remove the selected task.

Note: crypto.randomUUID() is available in modern secure browser contexts. If your environment does not support it, use a suitable unique-ID library or another reliable ID-generation strategy.

13. Common Array Methods in React State

14. Difference Between slice() and splice()

Remember: slice() creates a portion of an array without changing the original, while splice() modifies the array on which it is called.

15. Common Mistakes When Updating Arrays

• Using push() directly: This changes the existing state array.
• Using splice() on state: This mutates the original array.
• Passing the same array reference: React may skip rendering when the state value is identical by reference.
• Mutating objects inside a copied array: Spread syntax creates a shallow copy, not a deep copy.
• Using array indexes as keys for changing lists: This can cause incorrect component identity when items are inserted, removed, or reordered. Prefer stable unique IDs.
• Using the wrong array method: Use map() to transform items and filter() to remove items that do not satisfy a condition.
• Ignoring empty input: Validate user input before adding items to a list.
• Assuming state updates are immediate: A setter requests an update; it does not immediately change the current state variable in the running function.

16. Best Practices for Updating Arrays in React

• Treat arrays stored in state as read-only.
• Create a new array when adding, removing, replacing, or reordering elements.
• Use spread syntax or concat() to add items.
• Use filter() to remove items.
• Use map() to update or transform items.
• Use a functional state updater when the next state depends on the previous state.
• Use stable, unique IDs for list keys.
• When updating an object inside an array, create a new object for the changed item.
• Keep state structures reasonably simple to make updates easier to understand.
• Consider Immer for complex nested updates when appropriate, while understanding how it handles immutable state.

17. Interview Questions and Answers

Q1. What does updating arrays in React state mean?

Answer: It means creating a new array that represents the required changes and passing it to the state setter instead of mutating the existing state array.

Q2. Why should we avoid push() in React state?

Answer: push() modifies the original array. Prefer spread syntax or concat() to create a new array.

Q3. Which method is commonly used to remove an item from an array?

Answer: filter() creates a new array containing only the elements that satisfy the given condition.

Q4. Which method is commonly used to update an item?

Answer: map() can create a new array and return an updated value for the selected item.

Q5. What is the difference between map() and filter()?

Answer: map() transforms each item and returns a new array of results. filter() returns a new array containing only items that pass a condition.

Q6. What is immutable updating?

Answer: Immutable updating means creating a new value instead of modifying the existing state value directly.

Q7. How can we add an item to the beginning of an array?

Answer: Use setItems([newItem, ...items]).

Q8. How do we safely reverse an array in state?

Answer: Copy the array before reversing it, for example, setItems([...items].reverse()).

Q9. Why are unique keys important when rendering arrays?

Answer: Keys help React identify list items between renders, especially when items are inserted, removed, or reordered.

Q10. How do we update a property of an object inside an array?

Answer: Use map() to create a new array and object spread syntax to create a new version of the selected object.

18. Practice Exercises

1. Create a React component that adds new product names to an array.
2. Build a to-do list that lets users add and delete tasks.
3. Create a counter list where each button updates only its corresponding counter.
4. Update a user's status from inactive to active inside an array of user objects.
5. Insert a new item at the second position of an array using slice().
6. Create a button that reverses a displayed list without mutating state.
7. Build a shopping cart where the quantity of a selected product can be increased.
8. Sort a list of product prices in ascending order using a copied array.

19. Quick Revision Checklist

• Understand arrays and React state.
• Know why state arrays should not be mutated.
• Use spread syntax to add items.
• Use filter() to remove items.
• Use map() to update items.
• Use slice() and spread syntax to insert items.
• Copy arrays before using sort() or reverse().
• Use object spread when updating an object inside an array.
• Understand shallow copying and stable list keys.
• Practice building interactive lists with useState().

20. Useful Learning Resources

• React Official Documentation: Updating Arrays in State
• React Official Documentation: useState
• React Official Documentation: Adding Interactivity
• JustAcademy React JS Training Course
• Register for React JS Course Demo

Conclusion

Updating Arrays in State is an essential React JS skill for managing dynamic lists and interactive applications. The key principle is to avoid modifying existing state arrays directly. Use spread syntax and concat() to add items, filter() to remove items, map() to update items, and copied arrays when sorting or reversing. Practicing these techniques will help you build predictable, maintainable React components.

To learn more, visit the JustAcademy React JS Training Course or register for a course demo.