Choosing the state structure

A selected tea that goes out of date

Here is a small order: two teas, each with a quantity. +1 adds one to a tea, and Show puts that tea in the Details line under the list. The code works, mostly. In the result, press +1 next to Green tea:

1import { useState } from "react";2 3const startItems = [4  { id: 1, name: "Green tea", qty: 1 },5  { id: 2, name: "Mint tea", qty: 1 },6];7 8export default function App() {9  const [items, setItems] = useState(startItems);10  const [selectedItem, setSelectedItem] = useState(startItems[0]);11 12  function addOne(id) {13    setItems(items.map((item) => (item.id === id ? { ...item, qty: item.qty + 1 } : item)));14  }15 16  return (17    <>18      <ul>19        {items.map((item) => (20          <li key={item.id}>21            {item.name} × {item.qty} <button onClick={() => addOne(item.id)}>+1</button>{" "}22            <button onClick={() => setSelectedItem(item)}>Show</button>23          </li>24        ))}25      </ul>26      <p>Details: {selectedItem.name} × {selectedItem.qty}</p>27    </>28  );29}

The list says Green tea × 2, and Details still says Green tea × 1. Line 9 keeps the list in state. Line 10 keeps the selected item in a second piece of state, starting with the first item object itself. addOne on lines 12 to 14 makes a new list with a new Green tea object, using map and spread, as state updates should. But selectedItem still points at the old object. Line 26 shows that old object, and nothing tells it that the list moved on.

Nothing here is wrong line by line. The bug is in the structure: the same tea is stored twice, so the two can disagree. Choosing what goes in state, and in what shape, decides which bugs your component can have. Here is the same order with one change: it keeps only the id of the selected tea. Press +1 on Green tea again:

1import { useState } from "react";2 3const startItems = [4  { id: 1, name: "Green tea", qty: 1 },5  { id: 2, name: "Mint tea", qty: 1 },6];7 8export default function App() {9  const [items, setItems] = useState(startItems);10  const [selectedId, setSelectedId] = useState(1);11  const selectedItem = items.find((item) => item.id === selectedId);12 13  function addOne(id) {14    setItems(items.map((item) => (item.id === id ? { ...item, qty: item.qty + 1 } : item)));15  }16 17  return (18    <>19      <ul>20        {items.map((item) => (21          <li key={item.id}>22            {item.name} × {item.qty} <button onClick={() => addOne(item.id)}>+1</button>{" "}23            <button onClick={() => setSelectedId(item.id)}>Show</button>24          </li>25        ))}26      </ul>27      <p>Details: {selectedItem.name} × {selectedItem.qty}</p>28    </>29  );30}

Details now follows the list. Line 10 keeps selectedId, the number 1. Line 11 finds the item with that id in the current list on every render, with find. Line 23's Show button stores item.id instead of the object. There is one Green tea, in items, and Details reads it.

Each principle below has a "before" example with a bug its state structure causes, and an "after" example without it. Each row of this table is one principle, the bug it prevents, and the example that shows it:

Principle 1: group state that always changes together

A delivery app shows where the driver is on a grid of streets. The position has two numbers, a column and a row. This version keeps them in two pieces of state. Press Back to the shop; the shop is at column 0, row 0:

1import { useState } from "react";2 3export default function App() {4  const [x, setX] = useState(2);5  const [y, setY] = useState(1);6 7  function moveRight() {8    setX(x + 1);9  }10 11  function moveDown() {12    setY(y + 1);13  }14 15  function backToShop() {16    setX(0);17  }18 19  return (20    <>21      <p>Driver at column {x}, row {y}</p>22      {x === 0 && y === 0 && <p>The driver is at the shop.</p>}23      <button onClick={moveRight}>Right</button>24      <button onClick={moveDown}>Down</button>25      <button onClick={backToShop}>Back to the shop</button>26    </>27  );28}

The page says Driver at column 0, row 1, and the "at the shop" message on line 22 never shows. Lines 4 and 5 keep x and y apart, so every handler must remember both. backToShop on lines 15 to 17 sets x and forgets y. Press Down first, and it's even further off.

The two numbers are one thing, a position, and they always change together when the driver goes somewhere. So keep them in one piece of state, as an object:

1import { useState } from "react";2 3export default function App() {4  const [driver, setDriver] = useState({ x: 2, y: 1 });5 6  function moveRight() {7    setDriver({ ...driver, x: driver.x + 1 });8  }9 10  function moveDown() {11    setDriver({ ...driver, y: driver.y + 1 });12  }13 14  function backToShop() {15    setDriver({ x: 0, y: 0 });16  }17 18  return (19    <>20      <p>Driver at column {driver.x}, row {driver.y}</p>21      {driver.x === 0 && driver.y === 0 && <p>The driver is at the shop.</p>}22      <button onClick={moveRight}>Right</button>23      <button onClick={moveDown}>Down</button>24      <button onClick={backToShop}>Back to the shop</button>25    </>26  );27}

Line 4 keeps driver, an object with x and y. Line 15 goes back to the shop by writing a whole new position, { x: 0, y: 0 }: there is no second setter to forget. Lines 7 and 11 change one number and copy the other with ...driver, because a new object replaces the old one completely, as Updating objects in state explains. Press Back to the shop now, and the message on line 21 shows.

Group state when the values change together, or when you don't know ahead of time how many there will be, like the fields of a form the user can add to. Don't group values that change on their own: in State: a component's memory, the tea index and the "show details" switch stay separate, because one click changes only one of them.

Principle 2: avoid state that contradicts itself

A shop's order page tracks a parcel with two booleans. In the result, press Mark delivered first:

1import { useState } from "react";2 3export default function App() {4  const [isShipped, setIsShipped] = useState(false);5  const [isDelivered, setIsDelivered] = useState(false);6 7  return (8    <>9      <p>Order 1042: {isShipped ? "shipped" : "not shipped yet"}</p>10      <p>{isDelivered ? "Delivered to Asha" : "Not delivered yet"}</p>11      <button onClick={() => setIsShipped(true)}>Mark shipped</button>12      <button onClick={() => setIsDelivered(true)}>Mark delivered</button>13    </>14  );15}

The page says the order is not shipped yet and Delivered to Asha. Lines 4 and 5 can be set in any order, so the state allows a parcel that arrived before it left. Two booleans make four combinations, and only three are real: packing, shipped, and delivered.

Reacting to input with state showed the fix: one status that names the stage, so the state holds exactly one of the real combinations.

1import { useState } from "react";2 3export default function App() {4  const [status, setStatus] = useState("packing"); // "packing", "shipped", or "delivered"5  const isShipped = status === "shipped" || status === "delivered";6  const isDelivered = status === "delivered";7 8  return (9    <>10      <p>Order 1042: {isShipped ? "shipped" : "not shipped yet"}</p>11      <p>{isDelivered ? "Delivered to Asha" : "Not delivered yet"}</p>12      <button onClick={() => setStatus("shipped")} disabled={status !== "packing"}>Mark shipped</button>13      <button onClick={() => setStatus("delivered")} disabled={status !== "shipped"}>Mark delivered</button>14    </>15  );16}

Line 4 keeps one status: "packing", "shipped", or "delivered". Lines 5 and 6 still give the JSX its two booleans, but now they're worked out from status on every render, so "delivered" always means "shipped" too. Lines 12 and 13 turn each button on only when its step is next, so Mark delivered waits for Mark shipped.

Principle 3: don't store what you can work out

If you can work a value out from props or other state during render, it shouldn't be state. Stored, it's redundant: a second copy of information you already have, which every handler must keep in step. In this cart, remove Green tea, then press Empty the cart:

1import { useState } from "react";2 3const startItems = [4  { id: 1, name: "Green tea", price: 3 },5  { id: 2, name: "Lemon cake", price: 4 },6];7 8export default function App() {9  const [items, setItems] = useState(startItems);10  const [total, setTotal] = useState(7);11 12  function remove(item) {13    setItems(items.filter((other) => other.id !== item.id));14    setTotal(total - item.price);15  }16 17  function emptyCart() {18    setItems([]);19  }20 21  return (22    <>23      <ul>24        {items.map((item) => (25          <li key={item.id}>26            {item.name}: ${item.price} <button onClick={() => remove(item)}>Remove</button>27          </li>28        ))}29      </ul>30      <p>Total: ${total}</p>31      <button onClick={emptyCart}>Empty the cart</button>32    </>33  );34}

Remove works: line 14 takes the price off the total. But emptyCart on lines 17 to 19 only clears the list, so the empty cart says Total: $4. Line 10 made the total a second piece of state, and one of the two handlers forgot it.

1import { useState } from "react";2 3const startItems = [4  { id: 1, name: "Green tea", price: 3 },5  { id: 2, name: "Lemon cake", price: 4 },6];7 8export default function App() {9  const [items, setItems] = useState(startItems);10  const total = items.reduce((sum, item) => sum + item.price, 0);11 12  function remove(item) {13    setItems(items.filter((other) => other.id !== item.id));14  }15 16  function emptyCart() {17    setItems([]);18  }19 20  return (21    <>22      <ul>23        {items.map((item) => (24          <li key={item.id}>25            {item.name}: ${item.price} <button onClick={() => remove(item)}>Remove</button>26          </li>27        ))}28      </ul>29      <p>Total: ${total}</p>30      <button onClick={emptyCart}>Empty the cart</button>31    </>32  );33}

Line 10 is now a plain const that adds up the prices with reduce, on every render. remove lost its second line, and emptyCart can't forget anything. Empty the cart: the total says $0.

A common kind of redundant state is a prop copied into state. Here, PriceTag copies its price prop on line 4. Press Raise the price twice:

1import { useState } from "react";2 3function PriceTag({ price }) {4  const [shownPrice] = useState(price);5  return <p>Price tag: ${shownPrice}</p>;6}7 8export default function App() {9  const [price, setPrice] = useState(3);10 11  return (12    <>13      <p>Price in the shop: ${price}</p>14      <PriceTag price={price} />15      <button onClick={() => setPrice(price + 1)}>Raise the price</button>16    </>17  );18}

The shop says $5, and the tag still says $3. useState(price) uses its argument only on the first render; after that, React hands back the state it kept, as State showed. The parent passes a new price every time, and the tag ignores it. The fix is to read the prop:

1import { useState } from "react";2 3function PriceTag({ price }) {4  return <p>Price tag: ${price}</p>;5}6 7export default function App() {8  const [price, setPrice] = useState(3);9 10  return (11    <>12      <p>Price in the shop: ${price}</p>13      <PriceTag price={price} />14      <button onClick={() => setPrice(price + 1)}>Raise the price</button>15    </>16  );17}

Line 4 shows price itself, so the tag follows the shop. Copying a prop into state only makes sense when you want to ignore later changes on purpose, like a starting value the user then edits. Then name the prop to say so, with initial or default in front:

1function QuantityPicker({ initialQty }) {2  // Only the first initialQty counts. Later changes to it are ignored on purpose.3  const [qty, setQty] = useState(initialQty);4  return <button onClick={() => setQty(qty + 1)}>Quantity: {qty}</button>;5}

Line 1 takes initialQty, and line 3 uses it only to start the picker's own qty. Anyone reading the name knows that changing it later does nothing. (This component is a fragment: it has no result of its own.)

Principle 4: keep each thing in one place

The order in the overview stored Green tea twice: once in items, and once as selectedItem. That's duplication: the same data in two pieces of state. It looks harmless until one copy changes. Then the two disagree, and the page shows both. Watch it happen. This playground runs both versions from the overview, and prints what their state holds after every render:

With Keep a copy of the item, press +1 on Green tea: items gets a new Green tea with qty: 2, while selectedItem still holds the old object with qty: 1. The verdict says "Out of date". Press Show on Green tea, and the copy catches up, until the next +1. With Keep only its id, state holds selectedId: 1, which no +1 can make wrong: Details looks up the tea in the newest list each time.

The fix always has the same shape: keep the data once, and keep an id wherever you need to point at it. Then find the item during render. The same goes for "the item being edited", "the open chat", or "the song playing now": store which one, not a copy of it.

Principle 5: keep state flat, not deeply nested

Data often arrives nested: a menu has sections, sections have items. Kept in state that way, two problems appear. Here Green tea is on the menu twice, under Tea and under On sale. Each button raises its tea's price by $1. Press Green tea $3 under Tea:

1import { useState } from "react";2 3const startMenu = {4  title: "Today's menu",5  sections: [6    { title: "Tea", items: [{ id: 1, name: "Green tea", price: 3 }, { id: 2, name: "Mint tea", price: 3 }] },7    { title: "On sale", items: [{ id: 1, name: "Green tea", price: 3 }] },8  ],9};10 11export default function App() {12  const [menu, setMenu] = useState(startMenu);13 14  function raisePrice(sectionIndex, itemId) {15    setMenu({16      ...menu,17      sections: menu.sections.map((section, index) =>18        index !== sectionIndex19          ? section20          : { ...section, items: section.items.map((item) => (item.id === itemId ? { ...item, price: item.price + 1 } : item)) },21      ),22    });23  }24 25  return (26    <>27      <h4>{menu.title}</h4>28      {menu.sections.map((section, index) => (29        <section key={section.title}>30          <p>{section.title}:</p>31          {section.items.map((item) => (32            <button key={item.id} onClick={() => raisePrice(index, item.id)}>33              {item.name} ${item.price}34            </button>35          ))}36        </section>37      ))}38    </>39  );40}

Under Tea, Green tea costs $4. Under On sale, it still costs $3. Lines 6 and 7 hold two separate Green tea objects, so changing one leaves the other: duplication again, hidden inside the nesting. The second problem is raisePrice on lines 14 to 23. To change one price three levels down, it copies the menu, the sections list, the right section, its items list, and the item. Each level needs its own spread or map, and every one is a chance for a mistake.

The fix is to make the state flat: put each tea in one table, looked up by its id, and let the sections list ids. Making data flat like this is often called normalizing it, like a database keeps one table per kind of thing:

1import { useState } from "react";2 3const sections = [4  { title: "Tea", teaIds: [1, 2] },5  { title: "On sale", teaIds: [1] },6];7 8const startTeas = {9  1: { id: 1, name: "Green tea", price: 3 },10  2: { id: 2, name: "Mint tea", price: 3 },11};12 13export default function App() {14  const [teas, setTeas] = useState(startTeas);15 16  function raisePrice(id) {17    setTeas({ ...teas, [id]: { ...teas[id], price: teas[id].price + 1 } });18  }19 20  return (21    <>22      <h4>Today's menu</h4>23      {sections.map((section) => (24        <section key={section.title}>25          <p>{section.title}:</p>26          {section.teaIds.map((id) => (27            <button key={id} onClick={() => raisePrice(id)}>28              {teas[id].name} ${teas[id].price}29            </button>30          ))}31        </section>32      ))}33    </>34  );35}

Lines 3 to 6 are the sections, with ids instead of teas. They never change, so they aren't state at all. Lines 8 to 11 keep each tea once, in an object keyed by id. raisePrice on lines 16 to 18 is one line: copy the table, and replace one tea with a copy that costs $1 more. Lines 26 to 30 look each id up in teas. Press Green tea under Tea: both sections say $4, because both read the same tea.

Nesting isn't always wrong. A small object inside state, like the driver's position, is fine. Flatten when updates reach deep, or when the same thing appears in more than one place. If deep updates are hard to avoid, the use-immer library lets you write the change as if you were editing the object, and makes the copies for you; Updating objects in state shows it.

Cleaning up a checkout's state

Real components collect state over time, one feature at a time. Here are the state variables of a checkout page that grew that way. Each one made sense when it was added:

1const [items, setItems] = useState(startItems);2const [itemCount, setItemCount] = useState(2);3const [total, setTotal] = useState(7);4const [selectedItem, setSelectedItem] = useState(startItems[0]);5const [pinX, setPinX] = useState(2);6const [pinY, setPinY] = useState(1);7const [isPaying, setIsPaying] = useState(false);8const [isPaid, setIsPaid] = useState(false);

Eight pieces of state, and almost every handler must keep several of them in step. Run each through the five principles. Each row is one piece of state, the principle it breaks, and what replaces it:

The cleaned-up state has four pieces, and three plain values worked out during render:

1const [items, setItems] = useState(startItems);2const [selectedId, setSelectedId] = useState(1);3const [pin, setPin] = useState({ x: 2, y: 1 });4const [status, setStatus] = useState("editing"); // "editing", "paying", or "paid"5 6const itemCount = items.length;7const total = items.reduce((sum, item) => sum + item.price, 0);8const selectedItem = items.find((item) => item.id === selectedId);

Lines 1 to 4 are the only state: the items, which item is selected, where the delivery pin is, and one status. Lines 6 to 8 are worked out from them on every render, so they can never disagree with the list. Nothing is stored twice, and no two booleans can clash.

Practise spotting the first four principles. Sort each piece of state by the principle that would fix it:

Common mix-ups

• "More state makes a component faster, because it doesn't recalculate." No. Adding up a list or finding an item is quick, and it's always right. Stored copies cost a handler line each, and go wrong when one is missed.
• "Always put everything in one state object." No. Group values that change together. Values that change on their own are simpler as separate state.
• "useState(prop) keeps the state in step with the prop." No. The argument counts on the first render only. Read the prop directly, or name it initialSomething when you mean the first value.
• "Storing the selected object is fine, because it's the same object." Only until the list changes. Updates make new objects, and the stored one keeps the old values. Store the id.
• "Nested state is wrong." No. A small object in state is fine. Flatten when updates go several levels deep, or when the same data shows up in two places.
• "Booleans are the simplest kind of state." One is. Several that describe one choice are not: they allow combinations the UI can't have. Use one status.

Practice exercises

Each exercise shows its code's result under it, or when you press Edit & run. Find the principle the code breaks first, then use the hints.

import { useState } from "react";

export default function App() {
  const [firstName, setFirstName] = useState("Asha");
  const [lastName, setLastName] = useState("Menon");
  const [fullName, setFullName] = useState("Asha Menon");

  function handleFirstName(e) {
    setFirstName(e.target.value);
    setFullName(e.target.value + " " + lastName);
  }

  return (
    <>
      <label>
        First name <input value={firstName} onChange={handleFirstName} />
      </label>
      <label>
        Last name <input value={lastName} onChange={(e) => setLastName(e.target.value)} />
      </label>
      <p>Hello, {fullName}</p>
    </>
  );
}

1import { useState } from "react";2 3export default function App() {4  const [firstName, setFirstName] = useState("Asha");5  const [lastName, setLastName] = useState("Menon");6  const [fullName, setFullName] = useState("Asha Menon");7 8  function handleFirstName(e) {9    setFirstName(e.target.value);10    setFullName(e.target.value + " " + lastName);11  }12 13  return (14    <>15      <label>16        First name <input value={firstName} onChange={handleFirstName} />17      </label>18      <label>19        Last name <input value={lastName} onChange={(e) => setLastName(e.target.value)} />20      </label>21      <p>Hello, {fullName}</p>22    </>23  );24}

1import { useState } from "react";2 3export default function App() {4  const [firstName, setFirstName] = useState("Asha");5  const [lastName, setLastName] = useState("Menon");6  const [fullName, setFullName] = useState("Asha Menon");7 8  function handleFirstName(e) {9    setFirstName(e.target.value);10    setFullName(e.target.value + " " + lastName);11  }12 13  return (14    <>15      <label>16        First name <input value={firstName} onChange={handleFirstName} />17      </label>18      <label>19        Last name <input value={lastName} onChange={(e) => setLastName(e.target.value)} />20      </label>21      <p>Hello, {fullName}</p>22    </>23  );24}

1import { useState } from "react";2 3export default function App() {4  const [firstName, setFirstName] = useState("Asha");5  const [lastName, setLastName] = useState("Menon");6  const fullName = firstName + " " + lastName;7 8  return (9    <>10      <label>11        First name <input value={firstName} onChange={(e) => setFirstName(e.target.value)} />12      </label>13      <label>14        Last name <input value={lastName} onChange={(e) => setLastName(e.target.value)} />15      </label>16      <p>Hello, {fullName}</p>17    </>18  );19}

1import { useState } from "react";2 3const startSongs = [4  { id: 1, title: "Morning tea", likes: 0 },5  { id: 2, title: "Rainy window", likes: 0 },6];7 8export default function App() {9  const [songs, setSongs] = useState(startSongs);10  const [playing, setPlaying] = useState(null);11 12  function like(id) {13    setSongs(songs.map((song) => (song.id === id ? { ...song, likes: song.likes + 1 } : song)));14  }15 16  return (17    <>18      {songs.map((song) => (19        <p key={song.id}>20          {song.title} ({song.likes} likes) <button onClick={() => setPlaying(song)}>Play {song.title}</button>{" "}21          <button onClick={() => like(song.id)}>Like {song.title}</button>22        </p>23      ))}24      {playing !== null && <p>Now playing: {playing.title} ({playing.likes} likes)</p>}25    </>26  );27}

1import { useState } from "react";2 3const startSongs = [4  { id: 1, title: "Morning tea", likes: 0 },5  { id: 2, title: "Rainy window", likes: 0 },6];7 8export default function App() {9  const [songs, setSongs] = useState(startSongs);10  const [playingId, setPlayingId] = useState(null);11  const playing = songs.find((song) => song.id === playingId) ?? null;12 13  function like(id) {14    setSongs(songs.map((song) => (song.id === id ? { ...song, likes: song.likes + 1 } : song)));15  }16 17  return (18    <>19      {songs.map((song) => (20        <p key={song.id}>21          {song.title} ({song.likes} likes) <button onClick={() => setPlayingId(song.id)}>Play {song.title}</button>{" "}22          <button onClick={() => like(song.id)}>Like {song.title}</button>23        </p>24      ))}25      {playing !== null && <p>Now playing: {playing.title} ({playing.likes} likes)</p>}26    </>27  );28}

1import { useState } from "react";2 3export default function App() {4  const [width, setWidth] = useState(200);5  const [height, setHeight] = useState(150);6 7  function bigger() {8    setWidth(width + 20);9    setHeight(height + 15);10  }11 12  function resetSize() {13    setWidth(200);14  }15 16  return (17    <>18      <p>Photo size: {width} × {height}</p>19      <button onClick={bigger}>Bigger</button>20      <button onClick={resetSize}>Reset size</button>21    </>22  );23}

1import { useState } from "react";2 3export default function App() {4  const [size, setSize] = useState({ width: 200, height: 150 });5 6  function bigger() {7    setSize({ width: size.width + 20, height: size.height + 15 });8  }9 10  function resetSize() {11    setSize({ width: 200, height: 150 });12  }13 14  return (15    <>16      <p>Photo size: {size.width} × {size.height}</p>17      <button onClick={bigger}>Bigger</button>18      <button onClick={resetSize}>Reset size</button>19    </>20  );21}

1import { useState } from "react";2 3function CartBadge({ count }) {4  const [shown, setShown] = useState(count);5  return <p>Cart badge: {shown} in cart</p>;6}7 8export default function App() {9  const [count, setCount] = useState(1);10 11  return (12    <>13      <CartBadge count={count} />14      <button onClick={() => setCount(count + 1)}>Add to cart</button>15    </>16  );17}

1import { useState } from "react";2 3function CartBadge({ count }) {4  return <p>Cart badge: {count} in cart</p>;5}6 7export default function App() {8  const [count, setCount] = useState(1);9 10  return (11    <>12      <CartBadge count={count} />13      <button onClick={() => setCount(count + 1)}>Add to cart</button>14    </>15  );16}

1import { useState } from "react";2 3const startSections = [4  { title: "Tea", items: [{ id: 1, name: "Green tea", soldOut: false }, { id: 2, name: "Mint tea", soldOut: false }] },5  { title: "Popular", items: [{ id: 1, name: "Green tea", soldOut: false }] },6];7 8export default function App() {9  const [sections, setSections] = useState(startSections);10 11  function markSoldOut(sectionIndex, id) {12    setSections(13      sections.map((section, index) =>14        index !== sectionIndex15          ? section16          : { ...section, items: section.items.map((item) => (item.id === id ? { ...item, soldOut: true } : item)) },17      ),18    );19  }20 21  return (22    <>23      {sections.map((section, index) => (24        <section key={section.title}>25          <p>{section.title}:</p>26          {section.items.map((item) => (27            <button key={item.id} onClick={() => markSoldOut(index, item.id)}>28              {item.name}29              {item.soldOut && " (sold out)"}30            </button>31          ))}32        </section>33      ))}34    </>35  );36}

1import { useState } from "react";2 3const sections = [4  { title: "Tea", teaIds: [1, 2] },5  { title: "Popular", teaIds: [1] },6];7 8const startTeas = {9  1: { id: 1, name: "Green tea", soldOut: false },10  2: { id: 2, name: "Mint tea", soldOut: false },11};12 13export default function App() {14  const [teas, setTeas] = useState(startTeas);15 16  function markSoldOut(id) {17    setTeas({ ...teas, [id]: { ...teas[id], soldOut: true } });18  }19 20  return (21    <>22      {sections.map((section) => (23        <section key={section.title}>24          <p>{section.title}:</p>25          {section.teaIds.map((id) => (26            <button key={id} onClick={() => markSoldOut(id)}>27              {teas[id].name}28              {teas[id].soldOut && " (sold out)"}29            </button>30          ))}31        </section>32      ))}33    </>34  );35}

Check your understanding

For each question, ask what is stored, and whether anything stored could disagree with something else. Press Edit & run on a question's code to check your answer.

Key takeaways

• Group values that always change together, like a position's x and y, into one object, so no handler can set only half.
• Replace booleans that can contradict each other with one status that names the real combinations.
• Don't store what you can work out from props or state, like a total or a full name. Work it out during render.
• Don't copy a prop into state unless you mean its first value only, and then name it initialSomething.
• Keep each piece of data once. To point at an item, store its id and find it during render.
• Flatten deeply nested data into tables by id, so an update changes one place in one line.

Coming next: Sharing state between components. It applies "keep each thing in one place" across components: when two components need the same state, you move it up to their closest common parent.