Updating arrays in state

A shopping list that won't grow

An array is an object too, so everything in Updating objects in state applies to it. Arrays just have more ways to be changed by accident: many of their methods change the array they're called on. Here is a shopping list that adds eggs with push. Click Add eggs twice and watch the console under the result.

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Milk", "Bread"]);5 6  function addEggs() {7    items.push("Eggs");8    setItems(items);9    console.log("items in the array:", items.length);10  }11 12  return (13    <>14      <p>Shopping list: {items.join(", ")}</p>15      <button onClick={addEggs}>Add eggs</button>16    </>17  );18}

Line 4 keeps the list in state. Line 7 pushes "Eggs" onto the end of the array React already has, and line 8 hands React that same array. React compares it with what it has using Object.is, finds the same array, and skips the render. So line 14 keeps showing Milk, Bread, while line 9 prints items in the array: 3, then 4. Here is the fix:

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Milk", "Bread"]);5 6  function addEggs() {7    setItems([...items, "Eggs"]);8  }9 10  return (11    <>12      <p>Shopping list: {items.join(", ")}</p>13      <button onClick={addEggs}>Add eggs</button>14    </>15  );16}

Line 7 builds a new array with spread: ...items copies every item into it, and "Eggs" goes at the end. React gets a different array and renders: Milk, Bread, Eggs. Every kind of list change in this lesson works the same way: read the old array, build a new one, and hand the new one to the set function.

Which array methods change the array

Each row is one job. The middle column lists the ways that change the array they're called on: don't use them on an array in state. The right column lists the ways that leave it alone and give you a new array:

Watch out for slice and splice: the names are one letter apart, but slice copies part of an array into a new one, and splice removes or inserts items in the array itself. In React you'll use slice far more often. The Slicing, splicing and joining lesson covers both.

Four methods in the right column are newer: toSorted, toReversed, toSpliced, and with. Each is the copying version of a method that changes the array: sort, reverse, splice, and items[index] = value. They were added to JavaScript in 2023 (the ES2023 edition), and every current browser has them: Chrome and Edge since version 110, Firefox since 115, and Safari since 16. Run this:

const items = ["Milk", "Bread", "Eggs"];

console.log(items.toSorted().join(", "));
console.log(items.toReversed().join(", "));
console.log(items.with(1, "Tea").join(", "));
console.log(items.toSpliced(1, 1).join(", "));
console.log(items.join(", "));

Line 3 prints Bread, Eggs, Milk, a sorted copy. Line 4 prints Eggs, Bread, Milk, a reversed copy. Line 5 prints Milk, Tea, Eggs: with(1, "Tea") is a copy with position 1 replaced (positions start at 0). Line 6 prints Milk, Eggs: toSpliced(1, 1) is a copy with one item removed at position 1. Line 7 prints Milk, Bread, Eggs: after all that, items hasn't changed. The Sorting and copying safely lesson covers these methods in full, with what to do for older browsers.

Try any method from the table. The playground runs it for real, in this browser, on a fresh ["Milk", "Bread", "Eggs"], and shows what it did to items and what it returned:

1const items = ["Milk", "Bread", "Eggs"];2const result = items.push("Tea");

Look at sort and reverse: they change items and return the same array. So setItems(items.sort()) looks like it passes a sorted list, but it passes the array React already has, changed. And push returns the new length, 4, not an array at all.

Adding and removing items

Real lists hold objects with an id, so each item has a stable key (the Rendering lists lesson explains why). Type an item, add it to either end, and remove a few:

1import { useState } from "react";2 3let nextId = 3;4 5export default function App() {6  const [name, setName] = useState("");7  const [items, setItems] = useState([8    { id: 0, name: "Milk" },9    { id: 1, name: "Bread" },10    { id: 2, name: "Eggs" },11  ]);12 13  function addToEnd() {14    setItems([...items, { id: nextId++, name }]);15    setName("");16  }17 18  function addToStart() {19    setItems([{ id: nextId++, name }, ...items]);20    setName("");21  }22 23  function remove(id) {24    setItems(items.filter((item) => item.id !== id));25  }26 27  return (28    <>29      <label>30        Item <input value={name} onChange={(event) => setName(event.target.value)} />31      </label>32      <button onClick={addToEnd} disabled={name === ""}>Add to end</button>33      <button onClick={addToStart} disabled={name === ""}>Add to start</button>34      <ul>35        {items.map((item) => (36          <li key={item.id}>37            {item.name} <button onClick={() => remove(item.id)}>Remove</button>38          </li>39        ))}40      </ul>41    </>42  );43}

Line 3 keeps a counter for new ids, outside the component, so it isn't reset on each render. Lines 7 to 11 keep the list. Line 14 adds to the end: a new array with every old item, then the new one. Line 19 adds to the start: the new item first, then ...items. Spread does the job of both push and unshift, without changing items.

Line 24 removes an item with filter: it builds a new array of the items whose id isn't the one you clicked. Type Tea and click Add to end, then remove Bread: the list shows Milk, Eggs, and Tea. The add buttons stay off while the text box is empty (disabled on lines 32 and 33).

Replacing and transforming items with map

To change some or all of the items, use map. It calls your function for every item and builds a new array from what the function returns. Return the item as it is to keep it, or a new item to replace it. Click +1 next to Tea:

1import { useState } from "react";2 3export default function App() {4  const [cart, setCart] = useState([5    { id: 0, name: "Tea", price: 3, quantity: 1 },6    { id: 1, name: "Cake", price: 4, quantity: 2 },7    { id: 2, name: "Lemonade", price: 2, quantity: 1 },8  ]);9 10  function addOne(id) {11    const next = cart.map((item) => {12      if (item.id !== id) return item;13      return { ...item, quantity: item.quantity + 1 };14    });15    setCart(next);16  }17 18  function resetAll() {19    setCart(cart.map((item) => ({ ...item, quantity: 1 })));20  }21 22  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);23 24  return (25    <>26      <ul>27        {cart.map((item) => (28          <li key={item.id}>29            {item.name} × {item.quantity} <button onClick={() => addOne(item.id)}>+1</button>30          </li>31        ))}32      </ul>33      <p>Total: ${total}</p>34      <button onClick={resetAll}>Set every quantity to 1</button>35    </>36  );37}

addOne on lines 10 to 16 maps over the cart. Line 12 returns every other item as it is. Line 13 returns a new object for the item you clicked: ...item copies its fields, and the new quantity replaces the old one. Line 15 hands React the new array. The total on line 22 is worked out from the cart on every render, so it follows: Total: $13 becomes Total: $16.

resetAll on lines 18 to 20 transforms every item: each one becomes a copy with quantity: 1. Click Set every quantity to 1: Total: $9. To replace the item at a known position instead of by id, with is shorter: items.with(1, "Tea") is a copy with Tea at position 1.

Inserting at a position

Spread puts a new item at the start or the end. To put one in the middle, take two slices of the old array: everything before the position, and everything from it on. Then spread both into a new array with the new item between them. Pick a position and click Insert:

1import { useState } from "react";2 3let nextId = 3;4 5export default function App() {6  const [position, setPosition] = useState(1);7  const [queue, setQueue] = useState([8    { id: 0, title: "Morning Raga" },9    { id: 1, title: "Chai Time" },10    { id: 2, title: "Monsoon" },11  ]);12 13  function insertSong() {14    const index = Math.min(Math.max(position, 0), queue.length);15    const song = { id: nextId, title: `New song ${nextId}` };16    nextId++;17    setQueue([...queue.slice(0, index), song, ...queue.slice(index)]);18  }19 20  return (21    <>22      <label>23        Position <input type="number" value={position} onChange={(event) => setPosition(Number(event.target.value))} />24      </label>25      <button onClick={insertSong}>Insert</button>26      <ol>27        {queue.map((song) => (28          <li key={song.id}>{song.title}</li>29        ))}30      </ol>31    </>32  );33}

Line 6 keeps the position from the number box on line 23, starting at 1. Line 14 keeps it between 0 and the length of the queue, so a position like -3 or 99 still works. Line 17 builds the new queue: queue.slice(0, index) is the songs before the position, then the new song, then queue.slice(index), the rest. Positions start at 0, so position 1 puts New song 3 second, after Morning Raga. Try position 0, then 99.

toSpliced does the same in one call: toSpliced(index, 0, song) removes 0 items at index and puts song there, in a copy. Run both:

const queue = ["Morning Raga", "Chai Time", "Monsoon"];

const withSlices = [...queue.slice(0, 1), "Rain Song", ...queue.slice(1)];
const withToSpliced = queue.toSpliced(1, 0, "Rain Song");

console.log(withSlices.join(", "));
console.log(withToSpliced.join(", "));
console.log(queue.join(", "));

Lines 6 and 7 print the same Morning Raga, Rain Song, Chai Time, Monsoon. Line 8 prints the queue itself, still three songs.

Sorting and reversing a copy

sort and reverse are the methods that most often change state by accident: they reorder the array itself, and return it. Sort a copy instead. Click Cheapest first, then Reverse:

1import { useState } from "react";2 3export default function App() {4  const [products, setProducts] = useState([5    { id: 0, name: "Cake", price: 4 },6    { id: 1, name: "Lemonade", price: 2 },7    { id: 2, name: "Tea", price: 3 },8  ]);9 10  function cheapestFirst() {11    setProducts(products.toSorted((a, b) => a.price - b.price));12  }13 14  function reverseOrder() {15    setProducts(products.toReversed());16  }17 18  function cheapestFirstWithSort() {19    setProducts(products.sort((a, b) => a.price - b.price));20  }21 22  return (23    <>24      <button onClick={cheapestFirst}>Cheapest first</button>25      <button onClick={reverseOrder}>Reverse</button>26      <button onClick={cheapestFirstWithSort}>Cheapest first with sort()</button>27      <ol>28        {products.map((product) => (29          <li key={product.id}>30            {product.name}: ${product.price}31          </li>32        ))}33      </ol>34    </>35  );36}

Line 11 uses toSorted with a function that compares prices (the Sorting and copying safely lesson explains the compare function): Lemonade: $2, Tea: $3, Cake: $4. Line 15 reverses a copy with toReversed: Cake, Tea, Lemonade. Before these methods, people wrote [...products].sort(…): copy, then sort the copy, which is local mutation and just as safe.

Now press Run again to start over, and click Cheapest first with sort(). Nothing changes: line 19 sorts the array in state itself, and sort returns that same array, so React skips the render. The page says Cake, Lemonade, Tea, but the array now holds Lemonade, Tea, Cake. Click Reverse: you'd expect the page reversed, Tea, Lemonade, Cake, but you get Cake, Tea, Lemonade, the reverse of the hidden sorted order.

Updating objects inside an array

Here is the bug that copying the array doesn't fix. An array holds references to its objects, not the objects themselves (the Objects and references lesson shows why). So [...list] is a new array whose slots point at the same objects. Change an object through the copy, and you've changed it everywhere it's used. Two friends keep lists of teas they've tried. Tick Green tea in Asha's list:

1import { useState } from "react";2import TeaList from "./TeaList.jsx";3 4const teas = [5  { id: 0, name: "Green tea", tried: false },6  { id: 1, name: "Masala chai", tried: false },7];8 9export default function App() {10  const [ashaList, setAshaList] = useState(teas);11  const [benList, setBenList] = useState(teas);12 13  function toggle(list, setList, id) {14    const next = [...list];15    const tea = next.find((item) => item.id === id);16    tea.tried = !tea.tried;17    setList(next);18  }19 20  return (21    <>22      <h3>Asha has tried</h3>23      <TeaList teas={ashaList} onToggle={(id) => toggle(ashaList, setAshaList, id)} />24      <h3>Ben has tried</h3>25      <TeaList teas={benList} onToggle={(id) => toggle(benList, setBenList, id)} />26    </>27  );28}

Both lists start from the same teas on lines 4 to 7 (lines 10 and 11). The TeaList.jsx tab draws one list of checkboxes and calls onToggle with the tea's id. toggle on lines 13 to 18 looks careful: line 14 copies the array, and line 17 hands React the copy, so the page does update. But line 15 finds the Green tea object in the copy, which is the same object Ben's list holds, and line 16 changes it. Ben's Green tea is ticked too, though nobody touched his list.

Two lists make the bug easy to see. With one list, it hides: the page looks right, but the old array's objects have changed, and anything still holding them, like an undo history or the previous render, now holds the new values. The fix is map, with a new object for the tea that changes:

1import { useState } from "react";2import TeaList from "./TeaList.jsx";3 4const teas = [5  { id: 0, name: "Green tea", tried: false },6  { id: 1, name: "Masala chai", tried: false },7];8 9export default function App() {10  const [ashaList, setAshaList] = useState(teas);11  const [benList, setBenList] = useState(teas);12 13  function toggle(list, setList, id) {14    setList(list.map((tea) => (tea.id === id ? { ...tea, tried: !tea.tried } : tea)));15  }16 17  return (18    <>19      <h3>Asha has tried</h3>20      <TeaList teas={ashaList} onToggle={(id) => toggle(ashaList, setAshaList, id)} />21      <h3>Ben has tried</h3>22      <TeaList teas={benList} onToggle={(id) => toggle(benList, setBenList, id)} />23    </>24  );25}

Line 14 maps over the list. For the tea you clicked, it returns { ...tea, tried: !tea.tried }, a new object; every other tea is returned as it is. Tick Green tea for Asha: only Asha's list changes. The rule from Updating objects in state holds here too: copy every level you change, which here is the array and the one tea object.

Immer works on arrays as well. Your recipe can call find, assign to an item, even push or splice on the draft, and produce builds the new array and the new tea object. This is the same toggle with Immer, loaded from esm.sh:

1import { useState } from "react";2import { produce } from "immer";3import TeaList from "./TeaList.jsx";4 5const teas = [6  { id: 0, name: "Green tea", tried: false },7  { id: 1, name: "Masala chai", tried: false },8];9 10export default function App() {11  const [ashaList, setAshaList] = useState(teas);12  const [benList, setBenList] = useState(teas);13 14  function toggle(list, setList, id) {15    setList(16      produce(list, (draft) => {17        const tea = draft.find((item) => item.id === id);18        tea.tried = !tea.tried;19      }),20    );21  }22 23  return (24    <>25      <h3>Asha has tried</h3>26      <TeaList teas={ashaList} onToggle={(id) => toggle(ashaList, setAshaList, id)} />27      <h3>Ben has tried</h3>28      <TeaList teas={benList} onToggle={(id) => toggle(benList, setBenList, id)} />29    </>30  );31}

Lines 17 and 18 find the tea in the draft and flip tried, just like the buggy version, but on the draft. Immer makes a new array and a new Green tea object, and Ben's list keeps its own.

A shopping cart with every kind of update

A cart page uses almost every update from this lesson. Add a few products (twice for one of them), sort, and remove one:

1import { useState } from "react";2 3const shelf = [4  { id: "tea", name: "Tea", price: 3 },5  { id: "cake", name: "Cake", price: 4 },6  { id: "lemonade", name: "Lemonade", price: 2 },7];8 9export default function App() {10  const [cart, setCart] = useState([]);11 12  function add(product) {13    if (cart.some((line) => line.id === product.id)) {14      setCart(cart.map((line) => (line.id === product.id ? { ...line, quantity: line.quantity + 1 } : line)));15    } else {16      setCart([...cart, { ...product, quantity: 1 }]);17    }18  }19 20  function remove(id) {21    setCart(cart.filter((line) => line.id !== id));22  }23 24  function sortByName() {25    setCart(cart.toSorted((a, b) => a.name.localeCompare(b.name)));26  }27 28  const total = cart.reduce((sum, line) => sum + line.price * line.quantity, 0);29 30  return (31    <>32      {shelf.map((product) => (33        <button key={product.id} onClick={() => add(product)}>34          Add {product.name}35        </button>36      ))}37      <ul>38        {cart.map((line) => (39          <li key={line.id}>40            {line.name} × {line.quantity} <button onClick={() => remove(line.id)}>Remove</button>41          </li>42        ))}43      </ul>44      <p>Total: ${total}</p>45      <button onClick={sortByName}>Sort by name</button>46    </>47  );48}

add on lines 12 to 18 checks with some whether the product is already in the cart. If it is, line 14 maps over the cart and gives that line a new object with one more in quantity. If not, line 16 adds a new line to the end with spread: the product's fields, plus quantity: 1. Line 21 removes with filter, line 25 sorts a copy by name with toSorted, and line 28 adds up the total from the cart on every render.

Click Add Tea, Add Cake, and Add Tea again: Tea × 2 and Cake × 1, Total: $10. Sort by name puts Cake first. Remove Tea, and the total is $4. Not one line changes cart or an object in it.

Common mix-ups

• "setItems(items.sort()) passes a sorted list." No. It passes the same array, sorted in place. React sees the array it already has and skips the render. Use items.toSorted().
• "slice and splice are the same." No. slice copies; splice changes the array. toSpliced is the copying splice.
• "[...items] copies the objects too." No. It copies the array. Its slots point at the same objects, so changing one through the copy changes it in state.
• "If the page updates, the update was safe." No. Copy the array, then change an object in it, and the page updates while the old state's objects change too.
• "You can never call sort or push in React." No. On an array you just made, like [...items], they're fine: that's local mutation. The rule is for arrays already in state.
• "map makes a copy of every object." No. It makes a new array of whatever your function returns. Return the item as it is, and it's the same object.

Practice exercises

Each exercise shows its code's result under it, or when you press Edit & run. Change the code, and the result updates as you type. Try a guess first, then use the hints.

const items = ["Milk", "Bread", "Eggs"];
const reversed = items.reverse();
console.log(items.join(", "));

const items = ["Milk", "Bread", "Eggs"];
const reversed = items.toReversed();
console.log(items.join(", "));

import { useState } from "react";

export default function App() {
  const [items, setItems] = useState(["Milk", "Bread", "Eggs"]);

  function removeLast() {
    items.pop();
    setItems(items);
  }

  return (
    <>
      <p>{items.join(", ")}</p>
      <button onClick={removeLast}>Remove last</button>
    </>
  );
}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Milk", "Bread", "Eggs"]);5 6  function removeLast() {7    setItems(items.slice(0, -1));8  }9 10  return (11    <>12      <p>{items.join(", ")}</p>13      <button onClick={removeLast}>Remove last</button>14    </>15  );16}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([5    { id: 0, name: "Milk" },6    { id: 1, name: "Bread" },7    { id: 2, name: "Eggs" },8  ]);9 10  function remove(index) {11    items.splice(index, 1);12    setItems(items);13  }14 15  return (16    <ul>17      {items.map((item, index) => (18        <li key={item.id}>19          {item.name} <button onClick={() => remove(index)}>Remove</button>20        </li>21      ))}22    </ul>23  );24}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([5    { id: 0, name: "Milk" },6    { id: 1, name: "Bread" },7    { id: 2, name: "Eggs" },8  ]);9 10  function remove(id) {11    setItems(items.filter((item) => item.id !== id));12  }13 14  return (15    <ul>16      {items.map((item) => (17        <li key={item.id}>18          {item.name} <button onClick={() => remove(item.id)}>Remove</button>19        </li>20      ))}21    </ul>22  );23}

1import { useState } from "react";2 3export default function App() {4  const [todos, setTodos] = useState([5    { id: 0, text: "Buy tea", done: false },6    { id: 1, text: "Bake a cake", done: false },7    { id: 2, text: "Call Asha", done: false },8  ]);9 10  function toggle(id) {11    const next = [...todos];12    const todo = next.find((item) => item.id === id);13    todo.done = !todo.done;14    setTodos(next);15  }16 17  return (18    <ul>19      {todos.map((todo) => (20        <li key={todo.id}>21          <label>22            <input type="checkbox" checked={todo.done} onChange={() => toggle(todo.id)} /> {todo.text}23          </label>24        </li>25      ))}26    </ul>27  );28}

1import { useState } from "react";2 3export default function App() {4  const [todos, setTodos] = useState([5    { id: 0, text: "Buy tea", done: false },6    { id: 1, text: "Bake a cake", done: false },7    { id: 2, text: "Call Asha", done: false },8  ]);9 10  function toggle(id) {11    setTodos(todos.map((todo) => (todo.id === id ? { ...todo, done: !todo.done } : todo)));12  }13 14  return (15    <ul>16      {todos.map((todo) => (17        <li key={todo.id}>18          <label>19            <input type="checkbox" checked={todo.done} onChange={() => toggle(todo.id)} /> {todo.text}20          </label>21        </li>22      ))}23    </ul>24  );25}

1import { useState } from "react";2 3export default function App() {4  const [queue, setQueue] = useState(["Morning Raga", "Chai Time", "Monsoon"]);5 6  function playNext() {7    // Put "Rain Song" right after the first song, with toSpliced.8  }9 10  return (11    <>12      <button onClick={playNext}>Play Rain Song next</button>13      <ol>14        {queue.map((title) => (15          <li key={title}>{title}</li>16        ))}17      </ol>18    </>19  );20}

1import { useState } from "react";2 3export default function App() {4  const [queue, setQueue] = useState(["Morning Raga", "Chai Time", "Monsoon"]);5 6  function playNext() {7    setQueue(queue.toSpliced(1, 0, "Rain Song"));8  }9 10  return (11    <>12      <button onClick={playNext}>Play Rain Song next</button>13      <ol>14        {queue.map((title) => (15          <li key={title}>{title}</li>16        ))}17      </ol>18    </>19  );20}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Cake", "Lemonade", "Tea"]);5 6  function moveUp(index) {7    if (index === 0) return;8    // Swap items[index] and items[index - 1], without changing items.9  }10 11  return (12    <ol>13      {items.map((item, index) => (14        <li key={item}>15          {item} <button onClick={() => moveUp(index)}>Move up</button>16        </li>17      ))}18    </ol>19  );20}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState(["Cake", "Lemonade", "Tea"]);5 6  function moveUp(index) {7    if (index === 0) return;8    setItems(items.with(index - 1, items[index]).with(index, items[index - 1]));9  }10 11  return (12    <ol>13      {items.map((item, index) => (14        <li key={item}>15          {item} <button onClick={() => moveUp(index)}>Move up</button>16        </li>17      ))}18    </ol>19  );20}

Check your understanding

For each question, ask: does this make a new array, and does it change the old array or an object in it? Press Edit & run on a question's code to check your answer.

Key takeaways

• An array in state is read-only. push, pop, splice, sort, reverse, and items[index] = … change it; don't use them on it.
• Add with spread, remove with filter, replace or transform with map, and insert with two slices or toSpliced.
• Sort and reverse a copy: toSorted and toReversed (in every current browser), or [...items].sort().
• Copying the array doesn't copy its objects. To change an object in a list, map to a new object for that item and keep the rest.
• Immer works on arrays too: change the draft with any method, and produce builds the new array.

Coming next: Reacting to input with state. It starts the Managing state stage: describe each visual state of a component, and let state choose between them.