Updating objects in state

An order React doesn't see change

In State: a component's memory, a tea card kept its quantity in state: a number. Real screens often keep an object in state instead, with several fields that belong together, like an order line with an item and a quantity. Here is one. Click Add one a few times.

1import { useState } from "react";2 3export default function App() {4  const [order, setOrder] = useState({ item: "Green tea", quantity: 1 });5 6  function addOne() {7    order.quantity = order.quantity + 1;8  }9 10  return (11    <>12      <p>{order.quantity} × {order.item}</p>13      <button onClick={addOne}>Add one</button>14    </>15  );16}

Line 4 keeps the order in state: an object with item and quantity. Line 12 shows it: 1 × Green tea. addOne on lines 6 to 8 changes the object's quantity on line 7. You can click as often as you like: the page keeps saying 1 × Green tea.

The object really does change. But nothing on line 7 tells React about it: setOrder is never called, so React is never asked to render again. Changing an object that already exists, like this, is called mutation (to mutate means to change). Here is the fix:

1import { useState } from "react";2 3export default function App() {4  const [order, setOrder] = useState({ item: "Green tea", quantity: 1 });5 6  function addOne() {7    setOrder({ ...order, quantity: order.quantity + 1 });8  }9 10  return (11    <>12      <p>{order.quantity} × {order.item}</p>13      <button onClick={addOne}>Add one</button>14    </>15  );16}

Only line 7 is different. Instead of changing order, it builds a new object with spread: ...order copies every field of the old order into it, and quantity: order.quantity + 1 replaces the copied quantity. Then it hands the new object to setOrder. Click Add one: 2 × Green tea, 3 × Green tea, and so on.

Why changing the object doesn't update the page

Numbers, strings, and booleans can't be changed at all. setQuantity(5) replaces the 1 in state with a 5, but the number 1 itself stays 1. Objects are different: you can change the fields of an object that already exists, and every name that points at that object sees the change. The Objects and references lesson shows why: a variable holds a reference to an object, like an address, not the object itself.

When you call a set function, React compares the new value with the one it has, using Object.is. For an object, Object.is asks one question: is this the very same object? It doesn't look at the fields. Run this plain JavaScript to see it answer (the Equality and sameness lesson covers Object.is in full):

const profile = { name: "Asha", city: "Delhi" };
const sameProfile = profile;
sameProfile.city = "Pune";
console.log(Object.is(profile, sameProfile));
console.log(profile.city);

const newProfile = { ...profile, city: "Goa" };
console.log(Object.is(profile, newProfile));
console.log(profile.city);

Line 2 doesn't copy anything: sameProfile points at the same object as profile. So line 3 changes that one object, line 4 prints true, and line 5 prints Pune. Line 7 makes a new object with spread. Line 8 prints false: it's a different object, even though it was copied from the first. Line 9 prints Pune: making the copy didn't change the old object.

That gives mutation two ways to fail. If you change the object and call no set function, as in the overview, React isn't asked to render. If you change the object and then pass it to the set function, React compares it with what it has, finds the same object, and skips the render. This order tries the second way. Click Add one three times and watch the console under the result, then click Gift wrap.

1import { useState } from "react";2 3export default function App() {4  const [order, setOrder] = useState({ item: "Green tea", quantity: 1, giftWrap: false });5 6  function addOne() {7    order.quantity = order.quantity + 1;8    setOrder(order);9    console.log("quantity in the object:", order.quantity);10  }11 12  function toggleGiftWrap() {13    setOrder({ ...order, giftWrap: !order.giftWrap });14  }15 16  return (17    <>18      <p>19        {order.quantity} × {order.item}20        {order.giftWrap && ", gift wrapped"}21      </p>22      <button onClick={addOne}>Add one</button>23      <button onClick={toggleGiftWrap}>Gift wrap</button>24    </>25  );26}

Line 7 adds one to the quantity inside the object React has, and line 8 hands React that same object. Line 9 prints what the object holds. After three clicks, the console says quantity in the object: 2, 3, then 4, while the page still says 1 × Green tea.

Now click Gift wrap. Line 13 makes a new object, so React renders, and the page jumps to 4 × Green tea, gift wrapped. The hidden quantity came along: ...order copied the changed quantity into the new object. This is what makes mutation bugs hard to find. The page is wrong for a while, then suddenly right after an unrelated click, and nothing points at the line that caused it.

Each row is one way to write the click handler, with what React does and what the page shows:

Copy the object with spread

The usual way to make the new object is the object spread, ..., inside an object literal. It copies every field of an object into the new one, and any field you write after it replaces the copied field. Click Upgrade to Pro, then Move to Pune (no spread):

1import { useState } from "react";2 3export default function App() {4  const [profile, setProfile] = useState({ name: "Asha", city: "Delhi", plan: "Free" });5 6  function upgrade() {7    setProfile({ ...profile, plan: "Pro" });8  }9 10  function moveWithoutSpread() {11    setProfile({ city: "Pune" });12  }13 14  return (15    <>16      <p>Name: {profile.name}</p>17      <p>City: {profile.city}</p>18      <p>Plan: {profile.plan}</p>19      <button onClick={upgrade}>Upgrade to Pro</button>20      <button onClick={moveWithoutSpread}>Move to Pune (no spread)</button>21    </>22  );23}

Line 4 keeps a profile with three fields. upgrade on line 7 copies name, city, and plan, then sets plan to "Pro". Click Upgrade to Pro: the plan changes, and the name and city stay.

Now click Move to Pune (no spread). moveWithoutSpread on line 11 hands React an object with only a city. A set function replaces the whole value in state; it doesn't merge the new object into the old one. So the page shows Name: and Plan: with nothing after them: profile.name and profile.plan are now undefined, and React shows nothing for undefined. (Older React code with class components used this.setState, which did merge fields. The set function from useState doesn't.)

The order of the fields matters, because they're written from left to right and a later one wins. Run this plain JavaScript:

const profile = { name: "Asha", city: "Delhi", plan: "Free" };

const moved = { ...profile, city: "Pune" };
console.log(moved.city);

const notMoved = { city: "Pune", ...profile };
console.log(notMoved.city);

Line 3 copies the profile, then writes city: "Pune", so line 4 prints Pune. Line 6 writes city: "Pune" first, then the spread copies city: "Delhi" over it, so line 7 prints Delhi. Put the spread first and your changes after it.

You don't have to write the new object in one expression. const next = { ...profile }, then next.city = "Pune", then setProfile(next) is fine too: next is an object you just made, and nothing else has it yet. Changing an object you just created is called local mutation, and the Keeping components pure lesson explains why it's safe. The rule is about objects that are already in state.

Try every way side by side. Pick a way to write the click handler, then click Move to Pune in the page. The page is a real React component, and the list under it shows what the handler did to the old object and what it handed React:

1import { useState } from "react";2 3export default function App() {4  const [profile, setProfile] = useState({ name: "Asha", city: "Delhi" });5 6  function moveToPune() {7    profile.city = "Pune";8  }9 10  return (11    <>12      <p>{profile.name} lives in {profile.city}.</p>13      <button onClick={moveToPune}>Move to Pune</button>14    </>15  );16}

Change it and Change it, then set it leave the page saying Delhi while the old object says Pune. Spread into a new object and Copy, then change the copy show Pune, and the old object still says Delhi. Spread last makes a new object, so React renders, but the spread copies Delhi over Pune.

One state object for a whole form

A profile form has several text boxes. You could keep each one in its own state variable, or keep them all in one object, with one field per box. With one object, one change handler can update any field. Type in the boxes:

1import { useState } from "react";2 3export default function App() {4  const [form, setForm] = useState({ name: "Asha", email: "asha@example.com", city: "Delhi" });5 6  function handleChange(event) {7    setForm({ ...form, [event.target.name]: event.target.value });8  }9 10  return (11    <form>12      <label>13        Name <input name="name" value={form.name} onChange={handleChange} />14      </label>15      <label>16        Email <input name="email" value={form.email} onChange={handleChange} />17      </label>18      <label>19        City <input name="city" value={form.city} onChange={handleChange} />20      </label>21      <p>22        {form.name} ({form.email}) lives in {form.city}.23      </p>24    </form>25  );26}

Line 4 keeps the whole form in one object. Each text box on lines 13, 16, and 19 shows its field with value and calls handleChange on every key you type, as the text box in Your first React app did. Each box also has a name that matches its field: "name", "email", or "city".

Line 7 does all the work. event.target is the box you typed in, so event.target.name is the field to change and event.target.value is what the box now holds. ...form copies every field, and [event.target.name]: event.target.value replaces one of them. The square brackets make a computed property name: JavaScript works out the field's name from the expression inside (the Object basics lesson covers them). Type Ben in Name and Goa in City: the sentence on line 22 says Ben (asha@example.com) lives in Goa.

The styles in the styles.css tab only stack the label above each box. Forms have a lesson of their own, Forms and inputs, with checkboxes, selects, and checking what people type.

Nested objects: copy every level you change

An object in state can hold other objects, like an order with a shipping address inside it. Spread copies one level: it copies each field's value, and when that value is an object, it copies the reference to it, not the object. This order keeps the previous order in a second piece of state, so the page can show "Before" and "Now". Click Ship to Pune:

1import { useState } from "react";2 3export default function App() {4  const [order, setOrder] = useState({5    customer: "Asha",6    shipping: { city: "Delhi", pin: "110001" },7  });8  const [previous, setPrevious] = useState(null);9 10  function shipToPune() {11    const next = { ...order };12    next.shipping.city = "Pune";13    next.shipping.pin = "411001";14    setPrevious(order);15    setOrder(next);16  }17 18  return (19    <>20      <p>Now: {order.customer}'s order ships to {order.shipping.city} {order.shipping.pin}</p>21      {previous && <p>Before: it shipped to {previous.shipping.city} {previous.shipping.pin}</p>}22      <button onClick={shipToPune}>Ship to Pune</button>23    </>24  );25}

Lines 4 to 7 keep an order with a shipping object inside it, and line 8 keeps the previous order, starting as null. shipToPune makes next with spread on line 11, so the page does update: React gets a new object on line 15. But lines 12 and 13 change next.shipping, and next.shipping is the very same object as order.shipping. So the old order changed too, and the page says Before: it shipped to Pune 411001. The Delhi address is gone from everywhere.

"Nested" is a way of speaking: the shipping object isn't really inside the order. The order's shipping field holds a reference to a separate object. The fix is to copy each level on the way to the field you change:

1import { useState } from "react";2 3export default function App() {4  const [order, setOrder] = useState({5    customer: "Asha",6    shipping: { city: "Delhi", pin: "110001" },7  });8  const [previous, setPrevious] = useState(null);9 10  function shipToPune() {11    const next = {12      ...order,13      shipping: { ...order.shipping, city: "Pune", pin: "411001" },14    };15    setPrevious(order);16    setOrder(next);17  }18 19  return (20    <>21      <p>Now: {order.customer}'s order ships to {order.shipping.city} {order.shipping.pin}</p>22      {previous && <p>Before: it shipped to {previous.shipping.city} {previous.shipping.pin}</p>}23      <button onClick={shipToPune}>Ship to Pune</button>24    </>25  );26}

Lines 11 to 14 build a new order. Line 12 copies customer and the old shipping reference, and line 13 replaces shipping with a new object: ...order.shipping copies the old city and pin, and the new city and pin replace them. Click Ship to Pune: Before: it shipped to Delhi 110001. The old order kept its own shipping object.

You only copy the objects on the path to your change. customer is a string here, but if it were an object, the new order could share it with the old one: neither of them changes it. JavaScript's structuredClone(order) copies every level at once, which also works, but it copies the parts you didn't change too, so nothing is shared. The Immutability lesson compares these ways of copying.

Immer: write a change, get a copy

Copying every level by hand gets long when objects nest three or four levels deep. Immer is a small library that writes the copies for you. You call its produce function with the current object and a function, called the recipe. The recipe gets a draft: a stand-in for your object that you change with plain assignments, like draft.shipping.city = "Pune". The draft records each change, and when the recipe ends, produce builds a new object with those changes. The original object is never changed.

The live examples on this page load packages from the esm.sh service, so this one runs as it would in a project that ran npm install immer. Click Ship to Pune, look at the console, then click it again:

1import { useState } from "react";2import { produce } from "immer";3 4export default function App() {5  const [order, setOrder] = useState({6    customer: { name: "Asha" },7    shipping: { city: "Delhi", pin: "110001" },8  });9 10  function shipToPune() {11    const next = produce(order, (draft) => {12      draft.shipping.city = "Pune";13      draft.shipping.pin = "411001";14    });15    console.log("Same order?", Object.is(order, next));16    console.log("Same shipping?", Object.is(order.shipping, next.shipping));17    console.log("Same customer?", Object.is(order.customer, next.customer));18    setOrder(next);19  }20 21  return (22    <>23      <p>24        {order.customer.name}'s order ships to {order.shipping.city} {order.shipping.pin}25      </p>26      <button onClick={shipToPune}>Ship to Pune</button>27    </>28  );29}

Line 2 imports produce. Lines 11 to 14 call it with order and a recipe that changes the draft's shipping city and pin. Lines 15 to 17 compare the old and new objects. The first click prints Same order? false, Same shipping? false, and Same customer? true: Immer made a new order and a new shipping object, the path to your change, and shared the customer object you didn't touch. That's the same copy you wrote by hand above. Line 18 hands React the new order, and the page says Pune.

The second click sets the city and pin to the values they already have, so nothing changes, and produce gives back the same object: all three lines print true, and React skips the render. Immer also freezes the objects it returns, with Object.freeze, so a later mutation of that state fails instead of quietly changing it.

How does the draft record changes? It's a Proxy: an object that runs Immer's code each time you read or write one of its fields. You don't need to know that to use it.

Each row is one job, done by hand with spread and with Immer:

Immer has a companion package, use-immer, with a useImmer hook. It works like useState, except that its update function takes a recipe. In a project, after npm install immer use-immer, you would write:

import { useImmer } from "use-immer";

export default function App() {
  const [order, updateOrder] = useImmer({
    customer: { name: "Asha" },
    shipping: { city: "Delhi", pin: "110001" },
  });

  function shipToPune() {
    updateOrder((draft) => {
      draft.shipping.city = "Pune";
      draft.shipping.pin = "411001";
    });
  }

  return (
    <>
      <p>
        {order.customer.name}'s order ships to {order.shipping.city} {order.shipping.pin}
      </p>
      <button onClick={shipToPune}>Ship to Pune</button>
    </>
  );
}

This block has no live result. The copy of use-immer that esm.sh serves loads its own, second copy of React, and a hook from one copy of React can't run inside a component rendered by the other: the page stops with Cannot read properties of null (reading 'useState'). A project that installs the package with npm has only one React, and doesn't have this problem.

The hook itself is small, so here is the same component with a useImmer written for this lesson, in the useImmer.js tab. Click Ship to Pune:

1import { useImmer } from "./useImmer.js";2 3export default function App() {4  const [order, updateOrder] = useImmer({5    customer: { name: "Asha" },6    shipping: { city: "Delhi", pin: "110001" },7  });8 9  function shipToPune() {10    updateOrder((draft) => {11      draft.shipping.city = "Pune";12      draft.shipping.pin = "411001";13    });14  }15 16  return (17    <>18      <p>19        {order.customer.name}'s order ships to {order.shipping.city} {order.shipping.pin}20      </p>21      <button onClick={shipToPune}>Ship to Pune</button>22    </>23  );24}

In App.jsx, line 1 imports the hook from the second file, and line 4 uses it like useState. updateOrder on lines 10 to 13 takes a recipe. In useImmer.js, line 5 keeps the value with useState, and line 8 passes React an updater function that runs produce on the current value. The real package does a little more, such as freezing the first value and accepting a plain value as well as a recipe.

Immer is optional. Spread copies work everywhere and need no package; Immer pays off when updates go several levels deep. Either way, the rule is the same: React gets a new object, and the old one stays as it was.

Undo on a settings page

Never changing old objects pays off in features like Undo. When each change makes a new settings object, every old one is still there, exactly as it was, so you can keep a list of them and go back. Click a few buttons, then Undo:

1import { useState } from "react";2 3export default function App() {4  const [settings, setSettings] = useState({ theme: "Light", textSize: 16, emails: true });5  const [history, setHistory] = useState([]);6 7  function change(next) {8    setHistory([...history, settings]);9    setSettings(next);10  }11 12  function undo() {13    setSettings(history.at(-1));14    setHistory(history.slice(0, -1));15  }16 17  return (18    <>19      <p>20        Theme: {settings.theme}. Text size: {settings.textSize}px. Emails: {settings.emails ? "on" : "off"}.21      </p>22      <button onClick={() => change({ ...settings, theme: settings.theme === "Light" ? "Dark" : "Light" })}>23        Switch theme24      </button>25      <button onClick={() => change({ ...settings, textSize: settings.textSize + 2 })}>Bigger text</button>26      <button onClick={() => change({ ...settings, emails: !settings.emails })}>Emails on or off</button>27      <button onClick={undo} disabled={history.length === 0}>28        Undo29      </button>30      <p>Saved versions: {history.length}</p>31    </>32  );33}

Line 4 keeps the settings object, and line 5 keeps a list of earlier ones, starting empty. Every button calls change with a new object made by spread, on lines 22, 25, and 26. change adds the current settings to the end of the list on line 8, then sets the new ones on line 9. undo sets the last saved settings back on line 13, and line 14 removes it from the list. (Arrays in state follow the same rule as objects: lines 8 and 14 make new arrays instead of changing the old one. The next lesson covers arrays.)

Click Switch theme and Bigger text: Theme: Dark. Text size: 18px. with two saved versions. Click Undo twice to get back to Theme: Light. Text size: 16px. This only works because no button ever changed an old settings object. If one did, the list would hold the changed object, and Undo would put back the wrong settings.

Common mix-ups

• "Changing a field of a state object updates the page." No. The object changes, but the page only changes when React renders, and only a set function with a new value asks it to.
• "Calling the set function after a change makes it work." No. setOrder(order) hands React the same object. Object.is finds no difference, so React skips the render.
• "A set function merges the new fields into the old object." No. It replaces the whole value. Leave out ...profile and the other fields are gone.
• "Spread copies the whole object, nested objects too." No. It copies one level. A nested object is shared by the copy and the original until you copy it too.
• "You may never change any object in a component." No. Changing an object you just made, before anything else has it, is local mutation, and it's fine. The rule is for objects already in state.
• "Immer changes your state in place." No. Your recipe changes a draft. Immer builds a new object from it and leaves the original alone.

React's lint rules can catch the first two. The eslint-plugin-react-hooks package has a rule, react-hooks/immutability, that marks lines like order.quantity = 2 on a value from useState.

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.

import { useState } from "react";

export default function App() {
  const [post, setPost] = useState({ title: "Masala chai recipe", likes: 0 });

  function like() {
    post.likes = post.likes + 1;
  }

  return (
    <>
      <h3>{post.title}</h3>
      <p>Likes: {post.likes}</p>
      <button onClick={like}>Like</button>
    </>
  );
}

1import { useState } from "react";2 3export default function App() {4  const [post, setPost] = useState({ title: "Masala chai recipe", likes: 0 });5 6  function like() {7    post.likes = post.likes + 1;8  }9 10  return (11    <>12      <h3>{post.title}</h3>13      <p>Likes: {post.likes}</p>14      <button onClick={like}>Like</button>15    </>16  );17}

const order = { item: "Green tea", quantity: 1 };
const next = { quantity: 5, ...order };
console.log(next.quantity);

const order = { item: "Green tea", quantity: 1 };
const next = { ...order, quantity: 5 };
console.log(next.quantity);

1import { useState } from "react";2 3export default function App() {4  const [post, setPost] = useState({ title: "Masala chai recipe", likes: 0 });5 6  function like() {7    post.likes = post.likes + 1;8  }9 10  return (11    <>12      <h3>{post.title}</h3>13      <p>Likes: {post.likes}</p>14      <button onClick={like}>Like</button>15    </>16  );17}

1import { useState } from "react";2 3export default function App() {4  const [post, setPost] = useState({ title: "Masala chai recipe", likes: 0 });5 6  function like() {7    setPost({ ...post, likes: post.likes + 1 });8  }9 10  return (11    <>12      <h3>{post.title}</h3>13      <p>Likes: {post.likes}</p>14      <button onClick={like}>Like</button>15    </>16  );17}

1import { useState } from "react";2 3export default function App() {4  const [form, setForm] = useState({ name: "Asha", city: "Delhi" });5 6  function handleChange(event) {7    setForm({ [event.target.name]: event.target.value });8  }9 10  return (11    <form>12      <label>13        Name <input name="name" value={form.name} onChange={handleChange} />14      </label>15      <label>16        City <input name="city" value={form.city} onChange={handleChange} />17      </label>18      <p>19        {form.name} lives in {form.city}.20      </p>21    </form>22  );23}

1import { useState } from "react";2 3export default function App() {4  const [form, setForm] = useState({ name: "Asha", city: "Delhi" });5 6  function handleChange(event) {7    setForm({ ...form, [event.target.name]: event.target.value });8  }9 10  return (11    <form>12      <label>13        Name <input name="name" value={form.name} onChange={handleChange} />14      </label>15      <label>16        City <input name="city" value={form.city} onChange={handleChange} />17      </label>18      <p>19        {form.name} lives in {form.city}.20      </p>21    </form>22  );23}

1import { useState } from "react";2 3export default function App() {4  const [order, setOrder] = useState({5    customer: "Asha",6    shipping: { city: "Delhi", pin: "110001" },7  });8  const [previous, setPrevious] = useState(null);9 10  function fixPin() {11    setPrevious(order);12    // Give React a new order whose shipping pin is "110002".13  }14 15  return (16    <>17      <p>Now: {order.shipping.city} {order.shipping.pin}</p>18      {previous && <p>Before: {previous.shipping.city} {previous.shipping.pin}</p>}19      <button onClick={fixPin}>Fix the pin</button>20    </>21  );22}

1import { useState } from "react";2 3export default function App() {4  const [order, setOrder] = useState({5    customer: "Asha",6    shipping: { city: "Delhi", pin: "110001" },7  });8  const [previous, setPrevious] = useState(null);9 10  function fixPin() {11    setPrevious(order);12    setOrder({13      ...order,14      shipping: { ...order.shipping, pin: "110002" },15    });16  }17 18  return (19    <>20      <p>Now: {order.shipping.city} {order.shipping.pin}</p>21      {previous && <p>Before: {previous.shipping.city} {previous.shipping.pin}</p>}22      <button onClick={fixPin}>Fix the pin</button>23    </>24  );25}

1import { useState } from "react";2 3export default function App() {4  const [account, setAccount] = useState({5    plan: "Free",6    user: {7      name: "Asha",8      address: { city: "Delhi", pin: "110001" },9    },10  });11 12  function moveToPune() {13    // Give React a new account whose user.address.city is "Pune".14  }15 16  return (17    <>18      <p>19        {account.user.name} ({account.plan}) lives in {account.user.address.city}.20      </p>21      <button onClick={moveToPune}>Move to Pune</button>22    </>23  );24}

1import { useState } from "react";2 3export default function App() {4  const [account, setAccount] = useState({5    plan: "Free",6    user: {7      name: "Asha",8      address: { city: "Delhi", pin: "110001" },9    },10  });11 12  function moveToPune() {13    setAccount({14      ...account,15      user: {16        ...account.user,17        address: { ...account.user.address, city: "Pune" },18      },19    });20  }21 22  return (23    <>24      <p>25        {account.user.name} ({account.plan}) lives in {account.user.address.city}.26      </p>27      <button onClick={moveToPune}>Move to Pune</button>28    </>29  );30}

1import { useState } from "react";2import { produce } from "immer";3 4export default function App() {5  const [account, setAccount] = useState({6    plan: "Free",7    user: {8      name: "Asha",9      address: { city: "Delhi", pin: "110001" },10    },11  });12 13  function moveToPune() {14    setAccount(15      produce(account, (draft) => {16        draft.user.address.city = "Pune";17      }),18    );19  }20 21  return (22    <>23      <p>24        {account.user.name} ({account.plan}) lives in {account.user.address.city}.25      </p>26      <button onClick={moveToPune}>Move to Pune</button>27    </>28  );29}

Line 2 imports produce, and lines 14 to 18 pass React the object it builds. Click Move to Pune: the same Asha (Free) lives in Pune. as the version by hand.

Check your understanding

For each question, ask two things: is there a new object, and was the old one changed? Press Edit & run on a question's code to check your answer.

Key takeaways

• Changing a field of an object in state is mutation. It doesn't ask React to render, so the page keeps showing the old value.
• React compares the new state with the old one using Object.is. The same object, even with changed fields, means no render; a new object means a render.
• Make a new object with spread, { ...order, quantity: 2 }, and put the spread first. A set function replaces the whole object; it doesn't merge.
• One state object can hold a whole form; [event.target.name] picks the field to change.
• Spread copies one level. Copy every object on the path to the field you change, or nested objects stay shared.
• Immer's produce turns changes on a draft into a new object, copies only what changed, and leaves the original alone.

Coming next: Updating arrays in state. It applies the same rule to lists: adding, removing, replacing, inserting, and sorting items without changing the array in state.