Preserving and resetting state

A gift message that disappears

A checkout has a note for the delivery driver and, when the order is a gift, a gift message. Type something in both boxes in the result. Then untick This is a gift, and tick it again:

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15export default function App() {16  const [isGift, setIsGift] = useState(true);17  return (18    <>19      <NoteBox label="Note for the driver" />20      {isGift && <NoteBox label="Gift message" />}21      <label>22        <input23          type="checkbox"24          checked={isGift}25          onChange={(event) => setIsGift(event.target.checked)}26        />27        This is a gift28      </label>29    </>30  );31}

NoteBox (lines 3 to 13) keeps its own text on line 4, and line 9 is a controlled input that shows it. App renders the driver's NoteBox on line 19 every time, and the gift NoteBox on line 20 only while isGift is true. Lines 21 to 28 are the checkbox that sets isGift.

The driver's note survives. The gift message comes back empty. Both boxes are the same component, and App rendered again both times. The difference is that the gift box left the page for a moment, and the driver's box never did. React decides whether to keep a component's state by where the component is in the render tree, and whether it stays there.

State belongs to a place in the tree

It looks as if text lives inside NoteBox. It doesn't. NoteBox is a function, and its local variables start over each time React calls it. When it calls useState(""), it asks React for the value React is keeping for it. React keeps that value with the component's place in the render tree.

A place is the path from the top: "App's first child", "App's second child". In the checkout, the driver's note is App's first child, and the gift message is its second. That's why two NoteBoxes on one page each have their own text, as the State lesson showed: they're two places.

Each time a component renders, React compares the new tree with the last one, place by place:

• Same component in the same place: React keeps its state and gives it the new props.
• Nothing in a place that had a component: React removes the component and throws its state away.
• A component in a place that was empty: React makes a new one, with fresh state from useState's first value.
• A different component in a place: React removes the old one, state and all, and makes the new one.

Line 20, {isGift && <NoteBox label="Gift message" />}, gives the second place either a NoteBox or false, which renders nothing. When you untick the box, the second place is empty, so React removes the gift NoteBox and its text. When you tick it, the place gets a NoteBox again: a new one, starting at "". The driver's note never left its place, so its text stays.

Inside React, each place in the tree is an object called a fiber, and your state is stored on it. When React removes the fiber, the state goes with it. You don't need those details to use state; the Fiber and Reconciliation lessons, at the end of the course, show the code that does this comparison.

Same component, same place: React keeps the state

Here is a box that switches between a gift message and a note for the driver. Type Happy birthday in it, then press Switch note:

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15export default function App() {16  const [isGift, setIsGift] = useState(true);17  return (18    <>19      {isGift ? (20        <NoteBox label="Gift message" />21      ) : (22        <NoteBox label="Note for the driver" />23      )}24      <button onClick={() => setIsGift(!isGift)}>Switch note</button>25    </>26  );27}

Lines 19 to 23 pick between two NoteBox tags with a ternary, ?:. Line 20 is the gift message and line 22 the driver's note. Line 24 flips isGift.

The label changes to Note for the driver, but your Happy birthday stays in the box. You wrote two tags, yet both put a NoteBox in the same place: App's first child. React never sees your ?:; it only sees the tree you return. Before the click, that tree had a NoteBox first; after, it still does. Same component, same place, so React keeps the state and only passes a new label.

The same happens with two returns in an if. Try it:

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15export default function App() {16  const [isGift, setIsGift] = useState(true);17  if (isGift) {18    return (19      <>20        <NoteBox label="Gift message" />21        <button onClick={() => setIsGift(false)}>Switch note</button>22      </>23    );24  }25  return (26    <>27      <NoteBox label="Note for the driver" />28      <button onClick={() => setIsGift(true)}>Switch note</button>29    </>30  );31}

Line 17 decides which of two returns runs. Line 20 returns a gift NoteBox; line 27 returns a driver's one. Both are App's first child, so your text survives Switch note here too.

Here, keeping the text is a bug: a birthday message shouldn't turn into instructions for the driver. You'll fix it with a key in a later section. Often, though, keeping state is what you want: a counter that changes color, or a form that gets a new title, shouldn't forget what you typed.

A different component or parent resets it

Now the shop adds a bigger box for long messages. Type a message, then press Longer message, and then Short message:

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15function LongNote() {16  const [text, setText] = useState("");17  return (18    <p>19      <textarea20        aria-label="Long gift message"21        value={text}22        onChange={(event) => setText(event.target.value)}23      />24    </p>25  );26}27 28export default function App() {29  const [isLong, setIsLong] = useState(false);30  return (31    <>32      {isLong ? <LongNote /> : <NoteBox label="Gift message" />}33      <button onClick={() => setIsLong(!isLong)}>34        {isLong ? "Short message" : "Longer message"}35      </button>36    </>37  );38}

LongNote (lines 15 to 26) keeps its own text too, in a <textarea>. Line 32 puts a LongNote or a NoteBox in App's first place. Your text is gone after the first press, and gone again after the second. A LongNote isn't a NoteBox, even with the same kind of state, so React removes one and makes the other from scratch.

A different element above a component does the same, for everything inside it. This shop highlights the box by wrapping it in a div with a class. Type a message, then press Highlight:

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15export default function App() {16  const [isHighlighted, setIsHighlighted] = useState(false);17  return (18    <>19      {isHighlighted ? (20        <div className="highlight">21          <NoteBox label="Gift message" />22        </div>23      ) : (24        <section>25          <NoteBox label="Gift message" />26        </section>27      )}28      <button onClick={() => setIsHighlighted(!isHighlighted)}>Highlight</button>29    </>30  );31}

Lines 21 and 25 are the same NoteBox, with the same label. But line 20 wraps it in a div, and line 24 in a section. When the section becomes a div, React removes the section and its whole branch of the tree, and the NoteBox inside goes with it. The text vanishes.

The rule of thumb: to keep state, keep the tree's shape the same from one render to the next. Here, use one div and change only its class: <div className={isHighlighted ? "highlight" : ""}>. An attribute change keeps the element, so the text stays. Exercise 3 asks you to make that change.

Try every kind of change in the playground. It runs the note box with React on this page, in the structure the code shows. Type in the box, press Switch, and see whether your text is still there:

{isOn ? (
  <NoteBox label="Note for the driver" />
) : (
  <NoteBox label="Gift message" />
)}

Only New label keeps your text. Different component, Different wrapper, Different key, and Defined inside App all start empty. How to read the table: each row is one thing that can change between two renders, whether the NoteBox keeps its text, and why.

Never define a component inside another

The Your first component lesson warned you not to write a component inside another. Here is what goes wrong. Type a review, then press Helpful:

1import { useState } from "react";2 3export default function App() {4  const [helpful, setHelpful] = useState(0);5 6  function ReviewBox() {7    const [text, setText] = useState("");8    return (9      <input10        aria-label="Your review"11        value={text}12        onChange={(event) => setText(event.target.value)}13      />14    );15  }16 17  return (18    <>19      <ReviewBox />20      <button onClick={() => setHelpful(helpful + 1)}>Helpful ({helpful})</button>21    </>22  );23}

Your review vanishes. ReviewBox (lines 6 to 15) is written inside App, so line 6 runs every time App runs, and each time it makes a new function. Pressing Helpful sets helpful on line 20, so App renders again and makes a new ReviewBox. On line 19, React finds a component in the first place that is a different function from last time, so to React it's a different component. It removes the old one, with your text, and makes a new one.

The fix is to move the function out, to the top level of the file:

1import { useState } from "react";2 3function ReviewBox() {4  const [text, setText] = useState("");5  return (6    <input7      aria-label="Your review"8      value={text}9      onChange={(event) => setText(event.target.value)}10    />11  );12}13 14export default function App() {15  const [helpful, setHelpful] = useState(0);16  return (17    <>18      <ReviewBox />19      <button onClick={() => setHelpful(helpful + 1)}>Helpful ({helpful})</button>20    </>21  );22}

Now ReviewBox (lines 3 to 12) is made once, when the file loads. Every render of App puts the same function on line 18, so React keeps its state. Type, press Helpful, and your review stays. If an inner component needs a value from App, pass it as a prop instead of reaching for App's variables.

Resetting state on purpose with a key

Sometimes React keeping state is the bug. In this support chat, type a message to Asha, then click Ben:

1import { useState } from "react";2 3const contacts = [4  { id: "asha", name: "Asha" },5  { id: "ben", name: "Ben" },6  { id: "chen", name: "Chen" },7];8 9function ChatWindow({ contact }) {10  const [draft, setDraft] = useState("");11  return (12    <section>13      <h3>Chat with {contact.name}</h3>14      <input15        aria-label="Message"16        placeholder={"Message " + contact.name}17        value={draft}18        onChange={(event) => setDraft(event.target.value)}19      />20    </section>21  );22}23 24export default function App() {25  const [contact, setContact] = useState(contacts[0]);26  return (27    <>28      {contacts.map((item) => (29        <button key={item.id} onClick={() => setContact(item)}>30          {item.name}31        </button>32      ))}33      <ChatWindow contact={contact} />34    </>35  );36}

The heading says Chat with Ben, but your message to Asha is still in the box, one click from going to the wrong person. ChatWindow (lines 9 to 22) keeps draft on line 10. Line 33 always renders one ChatWindow in the same place; only its contact prop changes. Same component, same place: React keeps the draft. (The UI as a tree lesson met this chat, too.)

You want each person's chat to be a different component to React. A key says that. You used keys in Rendering lists to tell list items apart, and they work on any component: React keeps state only while both the type and the key stay the same.

1import { useState } from "react";2 3const contacts = [4  { id: "asha", name: "Asha" },5  { id: "ben", name: "Ben" },6  { id: "chen", name: "Chen" },7];8 9function ChatWindow({ contact }) {10  const [draft, setDraft] = useState("");11  return (12    <section>13      <h3>Chat with {contact.name}</h3>14      <input15        aria-label="Message"16        placeholder={"Message " + contact.name}17        value={draft}18        onChange={(event) => setDraft(event.target.value)}19      />20    </section>21  );22}23 24export default function App() {25  const [contact, setContact] = useState(contacts[0]);26  return (27    <>28      {contacts.map((item) => (29        <button key={item.id} onClick={() => setContact(item)}>30          {item.name}31        </button>32      ))}33      <ChatWindow key={contact.id} contact={contact} />34    </>35  );36}

Line 33 is the only change: <ChatWindow key={contact.id} contact={contact} />. When you click Ben, the key changes from "asha" to "ben". React removes Asha's ChatWindow, with her draft, and makes a new one for Ben, with an empty box. Click back to Asha: her draft is gone too, because her window was removed. The practical section keeps it.

A key isn't global. React compares keys only among the children of one parent, so "asha" can be a key in a contacts list and in a chat list at once. The key decides which child of this parent a component is.

There is a second way to reset: render the choices in different places. It suits a small, fixed number of choices:

{isAsha && <ChatWindow contact={contacts[0]} />}
{!isAsha && <ChatWindow contact={contacts[1]} />}

Line 1 is App's first place and line 2 its second. Asha's window always lives in the first, and Ben's in the second, so switching removes one and makes the other. It's a fragment of an app, so it doesn't run on its own. How to read the table: each row is a way to reset, what it looks like, and when to use it.

A key is also the easy way to clear a whole form. Keep a number in the parent, pass it as the form's key, and add one to it: the form, and every box in it, starts over. Exercise 5 does that.

A chat that keeps a draft for each contact

The key gave each person a fresh box, but a real chat app remembers what you half-wrote to each person. React throws state away when a component leaves the tree, so the drafts must live in a component that stays: App. Lift them up. Type to Asha, click Ben, then click Asha (draft):

1import { useState } from "react";2 3const contacts = [4  { id: "asha", name: "Asha" },5  { id: "ben", name: "Ben" },6  { id: "chen", name: "Chen" },7];8 9function ChatWindow({ contact, draft, onDraftChange, onSend }) {10  return (11    <section>12      <h3>Chat with {contact.name}</h3>13      <input14        aria-label="Message"15        value={draft}16        onChange={(event) => onDraftChange(event.target.value)}17      />18      <button onClick={onSend}>Send</button>19    </section>20  );21}22 23export default function App() {24  const [contact, setContact] = useState(contacts[0]);25  const [drafts, setDrafts] = useState({});26  const draft = drafts[contact.id] ?? "";27 28  function changeDraft(text) {29    setDrafts({ ...drafts, [contact.id]: text });30  }31 32  return (33    <>34      {contacts.map((item) => (35        <button key={item.id} onClick={() => setContact(item)}>36          {item.name}37          {drafts[item.id] ? " (draft)" : ""}38        </button>39      ))}40      <ChatWindow41        contact={contact}42        draft={draft}43        onDraftChange={changeDraft}44        onSend={() => changeDraft("")}45      />46    </>47  );48}

Line 25 keeps drafts, an object with one entry per contact id, like { asha: "Hi Asha" }. Line 26 reads the open contact's draft, or "" when there is none. changeDraft (lines 28 to 30) makes a new object with spread and replaces that one contact's entry. ChatWindow has no state now: line 15 shows the draft it's given, and line 16 reports each key. Line 37 marks contacts with a draft, and Send on line 18 clears it.

Switching contacts no longer loses anything, because the drafts never lived in ChatWindow. How to read the table: each row is a way to keep state when a component leaves the screen, how it works, and when it fits.

The last row is new: <Activity> came out in React 19.2. Its hidden mode hides a part of the page and keeps its state, so a tab you come back to still has what you typed. The Activity lesson covers it.

Common mix-ups

• "State lives inside the component function." No. React keeps it, tied to the component's place in the tree. The function asks for it with useState on every render.
• "A new prop resets a component's state." No. New props reach the same component in the same place, and its state stays. That's why the draft followed you to Ben.
• "Two different JSX tags are two different components." No. If both put the same component in the same place, React sees one component that stayed.
• "Hiding a component with && keeps its state for later." No. false removes it from the tree, and its state goes with it.
• "Only the component that changed loses its state." No. When an element changes type, React removes everything under it, including components that didn't change.
• "Keys are only for lists." No. Any component can take a key, and a new key resets it.
• "Keys must be unique across the whole app." No. They only need to be unique among the children of one parent.

Practice exercises

For each one, draw the tree before and after the click. Ask: is the same component in the same place, with the same key? Press Edit & run to check.

import { useState } from "react";

function NoteBox({ label }) {
  const [text, setText] = useState("");
  return (
    <p>
      <label>
        {label}{" "}
        <input value={text} onChange={(event) => setText(event.target.value)} />
      </label>
    </p>
  );
}

function Banner() {
  return <p>Free delivery on orders over $20!</p>;
}

export default function App() {
  const [showBanner, setShowBanner] = useState(false);
  return (
    <>
      {showBanner && <Banner />}
      <NoteBox label="Gift message" />
      <button onClick={() => setShowBanner(!showBanner)}>Show banner</button>
    </>
  );
}

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15function Banner() {16  return <p>Free delivery on orders over $20!</p>;17}18 19export default function App() {20  const [showBanner, setShowBanner] = useState(false);21  return (22    <>23      {showBanner && <Banner />}24      <NoteBox label="Gift message" />25      <button onClick={() => setShowBanner(!showBanner)}>Show banner</button>26    </>27  );28}

import { useState } from "react";

function CupCounter() {
  const [cups, setCups] = useState(0);
  return <button onClick={() => setCups(cups + 1)}>Cups of tea: {cups}</button>;
}

function GlassCounter() {
  const [glasses, setGlasses] = useState(0);
  return <button onClick={() => setGlasses(glasses + 1)}>Glasses of water: {glasses}</button>;
}

export default function App() {
  const [showTea, setShowTea] = useState(true);
  return (
    <>
      {showTea ? <CupCounter /> : <GlassCounter />}
      <button onClick={() => setShowTea(!showTea)}>Switch drink</button>
    </>
  );
}

1import { useState } from "react";2 3function CupCounter() {4  const [cups, setCups] = useState(0);5  return <button onClick={() => setCups(cups + 1)}>Cups of tea: {cups}</button>;6}7 8function GlassCounter() {9  const [glasses, setGlasses] = useState(0);10  return <button onClick={() => setGlasses(glasses + 1)}>Glasses of water: {glasses}</button>;11}12 13export default function App() {14  const [showTea, setShowTea] = useState(true);15  return (16    <>17      {showTea ? <CupCounter /> : <GlassCounter />}18      <button onClick={() => setShowTea(!showTea)}>Switch drink</button>19    </>20  );21}

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15export default function App() {16  const [isHighlighted, setIsHighlighted] = useState(false);17  return (18    <>19      {isHighlighted ? (20        <div className="highlight">21          <NoteBox label="Gift message" />22        </div>23      ) : (24        <section>25          <NoteBox label="Gift message" />26        </section>27      )}28      <button onClick={() => setIsHighlighted(!isHighlighted)}>Highlight</button>29    </>30  );31}

1import { useState } from "react";2 3function NoteBox({ label }) {4  const [text, setText] = useState("");5  return (6    <p>7      <label>8        {label}{" "}9        <input value={text} onChange={(event) => setText(event.target.value)} />10      </label>11    </p>12  );13}14 15export default function App() {16  const [isHighlighted, setIsHighlighted] = useState(false);17  return (18    <>19      <div className={isHighlighted ? "highlight" : ""}>20        <NoteBox label="Gift message" />21      </div>22      <button onClick={() => setIsHighlighted(!isHighlighted)}>Highlight</button>23    </>24  );25}

1import { useState } from "react";2 3export default function App() {4  const [helpful, setHelpful] = useState(0);5 6  function ReviewBox() {7    const [text, setText] = useState("");8    return (9      <input10        aria-label="Your review"11        value={text}12        onChange={(event) => setText(event.target.value)}13      />14    );15  }16 17  return (18    <>19      <ReviewBox />20      <button onClick={() => setHelpful(helpful + 1)}>Helpful ({helpful})</button>21    </>22  );23}

1import { useState } from "react";2 3function ReviewBox() {4  const [text, setText] = useState("");5  return (6    <input7      aria-label="Your review"8      value={text}9      onChange={(event) => setText(event.target.value)}10    />11  );12}13 14export default function App() {15  const [helpful, setHelpful] = useState(0);16  return (17    <>18      <ReviewBox />19      <button onClick={() => setHelpful(helpful + 1)}>Helpful ({helpful})</button>20    </>21  );22}

1import { useState } from "react";2 3function GiftForm() {4  const [to, setTo] = useState("");5  const [message, setMessage] = useState("");6  return (7    <>8      <input aria-label="To" value={to} onChange={(event) => setTo(event.target.value)} />9      <input aria-label="Message" value={message} onChange={(event) => setMessage(event.target.value)} />10      <p>Card: {to || message ? to + ": " + message : "(empty)"}</p>11    </>12  );13}14 15export default function App() {16  const [round, setRound] = useState(0);17  return (18    <>19      <GiftForm />20      <button onClick={() => setRound(round + 1)}>Start over</button>21    </>22  );23}

1import { useState } from "react";2 3function GiftForm() {4  const [to, setTo] = useState("");5  const [message, setMessage] = useState("");6  return (7    <>8      <input aria-label="To" value={to} onChange={(event) => setTo(event.target.value)} />9      <input aria-label="Message" value={message} onChange={(event) => setMessage(event.target.value)} />10      <p>Card: {to || message ? to + ": " + message : "(empty)"}</p>11    </>12  );13}14 15export default function App() {16  const [round, setRound] = useState(0);17  return (18    <>19      <GiftForm key={round} />20      <button onClick={() => setRound(round + 1)}>Start over</button>21    </>22  );23}

1import { useState } from "react";2 3const contacts = [4  { id: "asha", name: "Asha" },5  { id: "ben", name: "Ben" },6  { id: "chen", name: "Chen" },7];8 9function ChatWindow({ contact }) {10  const [draft, setDraft] = useState("");11  return (12    <section>13      <h3>Chat with {contact.name}</h3>14      <input15        aria-label="Message"16        placeholder={"Message " + contact.name}17        value={draft}18        onChange={(event) => setDraft(event.target.value)}19      />20    </section>21  );22}23 24export default function App() {25  const [contact, setContact] = useState(contacts[0]);26  return (27    <>28      {contacts.map((item) => (29        <button key={item.id} onClick={() => setContact(item)}>30          {item.name}31        </button>32      ))}33      <ChatWindow key={contact.id} contact={contact} />34    </>35  );36}

1import { useState } from "react";2 3const contacts = [4  { id: "asha", name: "Asha" },5  { id: "ben", name: "Ben" },6  { id: "chen", name: "Chen" },7];8 9function ChatWindow({ contact, draft, onDraftChange, onSend }) {10  return (11    <section>12      <h3>Chat with {contact.name}</h3>13      <input14        aria-label="Message"15        value={draft}16        onChange={(event) => onDraftChange(event.target.value)}17      />18      <button onClick={onSend}>Send</button>19    </section>20  );21}22 23export default function App() {24  const [contact, setContact] = useState(contacts[0]);25  const [drafts, setDrafts] = useState({});26  const draft = drafts[contact.id] ?? "";27 28  function changeDraft(text) {29    setDrafts({ ...drafts, [contact.id]: text });30  }31 32  return (33    <>34      {contacts.map((item) => (35        <button key={item.id} onClick={() => setContact(item)}>36          {item.name}37          {drafts[item.id] ? " (draft)" : ""}38        </button>39      ))}40      <ChatWindow41        contact={contact}42        draft={draft}43        onDraftChange={changeDraft}44        onSend={() => changeDraft("")}45      />46    </>47  );48}

Check your understanding

For each question, write the tree before and after, place by place, with each component's type and key.

Key takeaways

• React keeps state, not your component function. It ties the state to the component's place in the render tree.
• The same component in the same place keeps its state, whatever props it gets and whichever line of your code made it.
• Removing a component, or putting a different one in its place, throws its state away. A changed parent element takes its whole branch with it.
• Define components at the top level of a file. One written inside another is a new type on every render, so it resets.
• A new key resets a component on purpose. Keys only need to be unique among siblings.
• To keep state when a component leaves, lift it up, hide the component instead of removing it, or save it outside React.

Coming next: Extracting state logic into a reducer. When a component updates its state in many ways, useReducer gathers every update into one function you can read and test.