State as a snapshot

A count that hasn't changed yet

You know how to keep a value in a component with useState, from State: a component's memory. Here is a cart that adds a tea and then logs the count, to check that it went up. Click Add tea in the result, and watch the console that opens under it.

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  function handleAdd() {7    setCount(count + 1);8    console.log("count is", count);9  }10 11  return (12    <>13      <p>Items in cart: {count}</p>14      <button onClick={handleAdd}>Add tea</button>15    </>16  );17}

Line 4 keeps count in state, starting at 0. When you click, handleAdd (lines 6 to 9) runs: line 7 asks for count + 1, and line 8 logs count. The page says Items in cart: 1, but the console says count is 0. Click again: the page says 2, and the console says count is 1. The log is always one behind.

Nothing is broken. Look at line 4 again: count is declared with const. Nothing in this function can change it. setCount doesn't change the count you have; it tells React what count should be next time, and asks React to call App again. That new call, a new render, gets the new value. The handler you are in belongs to the old render, so it keeps reading 0.

Setting state asks React for a new render

In React, a click doesn't change the page directly. The click changes state, and React draws the page again from the new state. Here is a feedback form. Type a note in the result, then press Send:

1import { useState } from "react";2 3export default function App() {4  const [isSent, setIsSent] = useState(false);5  const [note, setNote] = useState("");6 7  if (isSent) {8    return <p>Thanks! We got your note: {note}</p>;9  }10 11  return (12    <form13      onSubmit={(e) => {14        e.preventDefault();15        setIsSent(true);16      }}17    >18      <textarea19        placeholder="Your feedback"20        value={note}21        onChange={(e) => setNote(e.target.value)}22      />23      <button>Send</button>24    </form>25  );26}

Lines 4 and 5 keep two pieces of state: isSent, which starts as false, and note, the text in the box. While isSent is false, the component returns the form on lines 12 to 24. When you press Send, this happens:

1. The form's onSubmit handler runs (line 13). Line 14 stops the browser from reloading the page, which a form does by default (the Form events lesson covers it).
2. Line 15 calls setIsSent(true). React stores true for the next render and puts a new render on its list. Nothing on the page has changed yet.
3. When the handler finishes, React calls App again. This time isSent is true, so line 8 returns the thank-you paragraph, with your note in it.
4. React updates the page to match: the form goes, and the paragraph appears.

The thank-you paragraph still shows your note, because note is state too, and the new render gets it. The page only changed because the state changed. These are the steps Render and commit walked through: a trigger, a render, and a commit that updates the page.

Each render has its own values

To render means React calls your component, which is a function. Each call is a fresh run of that function: its own count, its own local variables, its own event handlers. React keeps the state itself, outside your function. When it calls App, useState hands back the value for this render, and the JSX you return is worked out from it. That JSX, with its handlers, is the render's snapshot.

Here is a button that calls setCount(count + 1) three times. Guess what one click shows, then click it:

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

One click adds 1, not 3. Lines 11, 12, and 13 all read count from the same render, where it is 0. To see what a handler really does, replace each state variable with its value in that render. In the first render, the handler runs this:

setCount(0 + 1);
setCount(0 + 1);
setCount(0 + 1);

All three lines ask for 1, so the next render has 1. That render makes a new handler, which reads count as 1:

setCount(1 + 1);
setCount(1 + 1);
setCount(1 + 1);

This trick is called substitution. Each row is one render of the cart, and what its Add 3 teas button does:

Adding 3 for real needs a way to say "one more than whatever is queued", not "one more than this render's count". React has one, and the next lesson, Queueing a series of state updates, shows it.

Old values in alerts and timeouts

Substitution also tells you what an alert shows. This button adds 5 teas, then shows the count in an alert box. Predict the number, then click:

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  return (7    <>8      <p>Items in cart: {count}</p>9      <button10        onClick={() => {11          setCount(count + 5);12          alert(count);13        }}14      >15        Add 5 teas16      </button>17    </>18  );19}

In the first render, line 11 is setCount(0 + 5) and line 12 is alert(0). The alert says 0. Close it, and the page shows 5: React renders after the handler finishes, and an alert pauses the handler until you close it.

Now give React time to render first. This version waits three seconds before the alert, using setTimeout. By then the page has shown 5 for a while. What does the alert say?

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  return (7    <>8      <p>Items in cart: {count}</p>9      <button10        onClick={() => {11          setCount(count + 5);12          setTimeout(() => {13            alert(count);14          }, 3000);15        }}16      >17        Add 5 teas18      </button>19    </>20  );21}

It still says 0. Line 12 starts a timer, and the function on line 13 runs three seconds later. But that function was made during the first render, so the count it reads is that render's count: 0. A state variable never changes inside a render, even if the code that reads it runs much later.

Here is the same idea in a form you'd build for real: a chat that sends your message after three seconds. Press Send, then switch the recipient to Ravi before the alert appears.

1import { useState } from "react";2 3export default function App() {4  const [to, setTo] = useState("Asha");5  const [text, setText] = useState("See you at 6");6 7  function handleSend(e) {8    e.preventDefault();9    setTimeout(() => {10      alert(`Sent "${text}" to ${to}`);11    }, 3000);12  }13 14  return (15    <form onSubmit={handleSend}>16      <select aria-label="To" value={to} onChange={(e) => setTo(e.target.value)}>17        <option>Asha</option>18        <option>Ravi</option>19      </select>20      <input aria-label="Message" value={text} onChange={(e) => setText(e.target.value)} />21      <button>Send</button>22    </form>23  );24}

Lines 4 and 5 keep the recipient and the text. Pressing Send runs handleSend (lines 7 to 12), which starts a timer on line 9. When it fires, line 10 shows who the message went to. You picked Ravi on line 16 before it fired, so the page shows Ravi. The alert still says Sent "See you at 6" to Asha: the timer came from the render where to was Asha. Press Send again now, and that one goes to Ravi.

In this playground, the cart runs on this page, and the list shows every render with a new count. Press Say the count in 3 s, then press Add tea twice before the timer fires. The timer says 0 while the page shows 2. Then press Add 3 teas and see it add 1.

function handleAdd() {
  setCount(count + 1);
}

function handleAddThree() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

function handleSayLater() {
  setTimeout(() => {
    say(count);
  }, 3000);
}

Why: every handler is a closure

None of this is special React magic. It's how JavaScript functions work. A function made inside another function remembers the variables around it, even after the outer function has returned. That's a closure. Here is a plain JavaScript model of two renders:

function renderCart(count) {
  function handleAdd() {
    console.log("This handler sees", count);
  }
  return handleAdd;
}

const fromRender1 = renderCart(0);
const fromRender2 = renderCart(1);

fromRender2();
fromRender1();

renderCart (lines 1 to 6) stands in for a component. Each call gets its own count and makes its own handleAdd on line 2, which reads that count on line 3. Line 8 calls it with 0 and line 9 with 1, like two renders. Line 11 runs the second handler: This handler sees 1. Line 12 runs the first one afterwards: This handler sees 0. The later call didn't touch the earlier handler's count.

Your components work the same way. Each render calls App, gets a count from useState, and makes new handler functions that close over it. A click runs the handler that is on the page, from the render on screen. A timer runs the function it was given, from the render that started it. The Closures in loops, timers & memory lesson shows the same "old value" with timers in plain JavaScript.

Why fixed values are a feature

It's easy to see snapshots as a trap. They are a design choice, and a good one. Compare a plain JavaScript version of the chat, where the recipient is one shared variable that changes in place:

let to = "Asha";

function sendLater(text) {
  setTimeout(() => {
    console.log(`Sent "${text}" to ${to}`);
  }, 3000);
}

sendLater("See you at 6");
to = "Ravi";

Line 1 makes one to for the whole program. Line 9 asks to send the message, and line 10 switches to to Ravi straight after. Three seconds later, line 5 reads to as it is then, and prints Sent "See you at 6" to Ravi. The user pressed Send while Asha was picked, and the message went to someone else.

With state, that can't happen. The handler and its timer belong to the render the user saw when they clicked, so they act on exactly what was on the screen. Snapshots give you three things:

• Slow code acts on what the user saw. A timer, a server request, or an await uses the values from the click, however long it takes.
• One render never disagrees with itself. The heading, the list, and every handler in a render read the same values, so you never see half of an update.
• You can read a handler on its own. Replace each state variable with its value, and you know what the code does. No other code can change those values while it runs.

Each row compares a variable that changes in place with React state:

Sometimes you do want the newest value. When the next state depends on the queued one, like adding 3, the next lesson shows updater functions. When a timer must read the latest value, like a chat that sends whatever is typed when it fires, React has refs, covered in Referencing values with refs. Reach for them on purpose, when the snapshot isn't what you mean.

A snapshot across an await: saving a profile

Most slow code in a real app is a request to a server, written with async and await. Here is a profile form. Press Save, and while it says Saving…, type Rao after the name. The fake server takes two seconds.

1import { useState } from "react";2 3function saveToServer(name) {4  console.log("Sending", name);5  return new Promise((resolve) => setTimeout(resolve, 2000));6}7 8export default function App() {9  const [name, setName] = useState("Asha");10  const [status, setStatus] = useState("Not saved yet");11 12  async function handleSave() {13    setStatus("Saving…");14    await saveToServer(name);15    setStatus(`Saved "${name}"`);16  }17 18  return (19    <>20      <input aria-label="Name" value={name} onChange={(e) => setName(e.target.value)} />21      <button onClick={handleSave}>Save</button>22      <p>{status}</p>23    </>24  );25}

saveToServer (lines 3 to 6) logs what it was sent on line 4, and returns a promise that settles after two seconds. handleSave (lines 12 to 16) sets the status on line 13, waits on line 14, and sets it again on line 15. The console says Sending Asha as soon as you press Save, and React renders Saving… while the handler waits. After the wait, the status says Saved "Asha", while the box shows Asha Rao.

That is the right answer. The rest of handleSave after await is still the same function call from the same render, so name on line 15 is the name that was sent. The status tells the truth about the save; the box shows your newer, unsaved text. Press Save again, and it saves Asha Rao.

Common mix-ups

• "setCount changes count right away." No. It stores the next value in React and asks for a new render. The count you have stays the same until the end of the handler, and after.
• "React renders in the middle of my handler." No. React waits until your handler finishes, or pauses at an await, then renders. The lines after setCount run first, with the old values.
• "A timer that shows an old value is a React bug." No. The timer's function is a closure over the render that started it, as in plain JavaScript.
• "After an await, state has caught up." No. The code after await is the same function call, with the same render's values, however long it waited.
• "Calling setCount(count + 1) three times adds 3." No. All three read the same count, so they all ask for the same number.
• "A plain let variable would fix it." No. A local variable starts over on every render, and changing it doesn't ask React to render. The screen wouldn't update.

Practice exercises

For each one, use substitution first: write down what each state variable is in the render you're in. Then press Edit & run and click to check.

import { useState } from "react";

export default function App() {
  const [likes, setLikes] = useState(10);

  function handleLike() {
    setLikes(likes + 1);
    console.log(likes);
  }

  return <button onClick={handleLike}>Like ({likes})</button>;
}

1import { useState } from "react";2 3export default function App() {4  const [likes, setLikes] = useState(10);5 6  function handleLike() {7    setLikes(likes + 1);8    console.log(likes);9  }10 11  return <button onClick={handleLike}>Like ({likes})</button>;12}

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Items in cart: {count}</p>
      <button
        onClick={() => {
          setCount(count + 5);
          alert(count);
        }}
      >
        Add 5 teas
      </button>
    </>
  );
}

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(0);5 6  return (7    <>8      <p>Items in cart: {count}</p>9      <button10        onClick={() => {11          setCount(count + 5);12          alert(count);13        }}14      >15        Add 5 teas16      </button>17    </>18  );19}

1import { useState } from "react";2 3export default function App() {4  const [isOn, setIsOn] = useState(false);5  const [message, setMessage] = useState("Notifications off");6 7  function handleToggle() {8    setIsOn(!isOn);9    setMessage(isOn ? "Notifications on" : "Notifications off");10  }11 12  return (13    <>14      <button onClick={handleToggle}>{isOn ? "Turn off" : "Turn on"}</button>15      <p>{message}</p>16    </>17  );18}

1import { useState } from "react";2 3export default function App() {4  const [isOn, setIsOn] = useState(false);5  const [message, setMessage] = useState("Notifications off");6 7  function handleToggle() {8    const next = !isOn;9    setIsOn(next);10    setMessage(next ? "Notifications on" : "Notifications off");11  }12 13  return (14    <>15      <button onClick={handleToggle}>{isOn ? "Turn off" : "Turn on"}</button>16      <p>{message}</p>17    </>18  );19}

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(4);

  function handleClick() {
    setCount(count * 2);
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

1import { useState } from "react";2 3export default function App() {4  const [count, setCount] = useState(4);5 6  function handleClick() {7    setCount(count * 2);8    setCount(count + 1);9  }10 11  return <button onClick={handleClick}>Count: {count}</button>;12}

import { useState } from "react";

export default function App() {
  const [step, setStep] = useState(0);

  function handleNext() {
    setStep(step + 1);
    setTimeout(() => {
      console.log("Timer from step", step);
    }, 1000);
  }

  return <button onClick={handleNext}>Next step ({step})</button>;
}

1import { useState } from "react";2 3export default function App() {4  const [step, setStep] = useState(0);5 6  function handleNext() {7    setStep(step + 1);8    setTimeout(() => {9      console.log("Timer from step", step);10    }, 1000);11  }12 13  return <button onClick={handleNext}>Next step ({step})</button>;14}

1import { useState } from "react";2 3export default function App() {4  const [to, setTo] = useState("Asha");5  const [text, setText] = useState("See you at 6");6 7  function handleSend(e) {8    e.preventDefault();9    setTimeout(() => {10      const picked = document.querySelector("select").value;11      alert(`Sent "${text}" to ${picked}`);12    }, 3000);13  }14 15  return (16    <form onSubmit={handleSend}>17      <select aria-label="To" value={to} onChange={(e) => setTo(e.target.value)}>18        <option>Asha</option>19        <option>Ravi</option>20      </select>21      <input aria-label="Message" value={text} onChange={(e) => setText(e.target.value)} />22      <button>Send</button>23    </form>24  );25}

1import { useState } from "react";2 3export default function App() {4  const [to, setTo] = useState("Asha");5  const [text, setText] = useState("See you at 6");6 7  function handleSend(e) {8    e.preventDefault();9    setTimeout(() => {10      alert(`Sent "${text}" to ${to}`);11    }, 3000);12  }13 14  return (15    <form onSubmit={handleSend}>16      <select aria-label="To" value={to} onChange={(e) => setTo(e.target.value)}>17        <option>Asha</option>18        <option>Ravi</option>19      </select>20      <input aria-label="Message" value={text} onChange={(e) => setText(e.target.value)} />21      <button>Send</button>22    </form>23  );24}

Check your understanding

For each code question, write down the state values in the render you're in, then replace each variable with its value.

Key takeaways

• Setting state doesn't change the variable you have. It stores the next value in React and asks for a new render.
• Every render has its own state values, its own JSX, and its own event handlers. They never change inside that render.
• To predict a handler, replace each state variable with its value in that render: substitution.
• Alerts, timers, and code after await read the values of the render they came from, because they are closures over it.
• That's a feature: slow code acts on what the user saw, and one render never disagrees with itself.

Coming next: Queueing a series of state updates. It shows how React batches several updates into one render, and how updater functions like (c) => c + 1 make Add 3 teas add 3.