React

When you open a website, your browser (Chrome, Firefox, Safari, Edge) asks another computer, a server, for a file. The file is plain text written in HTML. The browser reads it and draws what it describes: headings, paragraphs, buttons, pictures.

Three languages work together on almost every page. HTML says what is on the page. CSS says how it looks. JavaScript makes it do things. React is written in JavaScript, so it builds on all three.

Browser

The program that fetches pages and draws them on your screen.

Server

A computer somewhere else that sends files when a browser asks.

HTML

HyperText Markup Language: text that describes the parts of a page.

HTML wraps content in tags. An opening tag like <h1> and a closing tag </h1> mark where something starts and ends. Together they make an element. Elements can sit inside other elements, like boxes in boxes.

1<!doctype html>2<html>3  <head>4    <title>My to-dos</title>5  </head>6  <body>7    <h1>My to-dos</h1>8    <ul>9      <li>Buy milk</li>10      <li>Walk the dog</li>11    </ul>12    <button class="add">Add a to-do</button>13  </body>14</html>

CSS is a list of rules. Each rule has a selector (which elements it applies to) and some declarations (what to change). The browser applies every matching rule to every element.

1h1 {2  font-size: 2rem;3  color: darkslateblue;4}5
6.add {7  padding: 8px 16px;8  border-radius: 6px;9}

The browser doesn’t keep your HTML as text. It reads it once and builds a tree of objects in memory, one object per element. This tree is the DOM (Document Object Model). What you see on screen is a picture of the DOM, not of the file.

JavaScript is a programming language the browser runs. It can find elements in the DOM, change them, add new ones and listen for things the user does, like clicks. Something the user does is an event.

1const list = document.querySelector('ul')2const button = document.querySelector('.add')3
4button.addEventListener('click', () => {5  const item = document.createElement('li')6  item.textContent = 'A new to-do'7  list.appendChild(item)8})

Variable

A name for a value, so you can use it later.

Function

A piece of code saved to run when you need it, often with a name.

Event

Something that happens on the page: a click, a key press, typing.

Adding one item is easy. A real to-do app also ticks items off, deletes them, filters them, shows a count and an empty message. Each feature needs code that finds the right elements and changes them, and every change must keep all the others correct.

1function tick(item) {2  item.classList.toggle('done')3  // Now update the count…4  const left = document.querySelectorAll('li:not(.done)')5  counter.textContent = left.length + ' left'6  // …and hide it if a filter is on…7  // …and show "All done" if nothing is left…8  // …and remember to undo all this when it is unticked.9}

React is a JavaScript library (code someone else wrote, for you to use) for building user interfaces. You describe what the page should look like for the data you have. When the data changes, you describe it again, and React works out the smallest set of DOM changes to get there.

• Your data is the single source of truth. The page always matches it.
• You build the page from small reusable pieces called components.
• React runs in the browser and changes the DOM for you.

• HTML describes what is on a page, CSS how it looks, JavaScript what it does.
• The browser turns HTML into the DOM, a tree of objects. The screen shows the DOM.
• JavaScript makes pages interactive by listening for events and changing the DOM.
• Doing that by hand means keeping data and DOM in step yourself, which breeds bugs.
• React lets you describe the page for your data, and changes the DOM for you.

React code is written on your computer and turned into files a browser understands. For that you need a few tools. You install them once and use them for every project.

Terminal

A window where you type commands instead of clicking. On macOS it is called Terminal; on Windows, PowerShell or Windows Terminal.

Node.js

A program that runs JavaScript outside the browser. The tools that build React projects are written in JavaScript, so they need it.

npm

The Node Package Manager. It comes with Node.js and downloads packages: libraries like React, shared by other developers.

Code editor

A program for writing code, such as VS Code. It colours code and points out mistakes.

1node --version2npm --version

Vite (French for “quick”, said “veet”) is a build tool: it serves your code to the browser while you work, and packs it into small files when you publish. It can also create a ready-made React project for you.

1npm create vite@latest todo-app -- --template react-ts2cd todo-app3npm install4npm run dev

package.json lists the packages the project depends on and its scripts: short names for longer commands. npm run dev runs the script called dev, which starts Vite.

1{2  "name": "todo-app",3  "scripts": {4    "dev": "vite",5    "build": "tsc -b && vite build"6  },7  "dependencies": {8    "react": "^19.0.0",9    "react-dom": "^19.0.0"10  }11}

A React app usually has a single HTML page with an empty element in it. A small script, main.tsx, finds that element and hands it to React. From then on, React draws everything inside it.

1<body>2  <div id="root"></div>3  <script type="module" src="/src/main.tsx"></script>4</body>

1import { StrictMode } from 'react'2import { createRoot } from 'react-dom/client'3import './index.css'4import App from './App'5
6const box = document.getElementById('root')!7createRoot(box).render(8  <StrictMode>9    <App />10  </StrictMode>11)

The .tsx files are TypeScript: JavaScript plus types, labels that say what kind of value something is. Your editor checks the labels as you type and underlines mistakes before you ever run the code. The browser never sees them: they are removed when the code is built.

1let title: string = 'Buy milk'2let done: boolean = false3let count: number = 34
5title = 42 // Error: a number is not a string

While npm run dev runs, Vite watches your files. Save a change and the page in the browser updates within a moment, usually without losing what is on screen. This is hot module replacement, or HMR.

1export default function App() {2  return <h1>My to-dos</h1>3}

Errors show up in three places: underlined in your editor, as an overlay on the page from Vite, and in the browser’s console. Open the console with F12 (or Cmd+Option+I on a Mac) and choose the Console tab. An error says what went wrong and where: a file name and a line number.

1[plugin:vite:oxc] Transform failed with 1 error:2
3[PARSE_ERROR] Unexpected token4   ╭─[ src/App.tsx:3:3 ]5   │6 3 │   )7   │   ┬8───╯

• Node.js runs JavaScript tools on your computer; npm downloads packages.
• npm create vite@latest makes a project; npm install fetches packages; npm run dev serves it.
• React apps have one HTML page with an empty div; main.tsx hands it to React.
• TypeScript adds types your editor checks. The browser never sees them.
• Errors give a file and a line. Read them first, in the editor, the overlay or the console.

JSX is a way of writing what looks like HTML straight inside JavaScript code. React uses it to describe what should be on screen. It is not HTML and the browser can’t read it: Vite translates it into plain JavaScript before the browser gets it.

1const heading = <h1>My to-dos</h1>

That line would be an error in normal JavaScript. In a .tsx (or .jsx) file it is fine: the file ending tells the tools to expect JSX.

The translation turns each tag into a function call. The call returns a small object, a React element, that records what to draw: which tag, and with which details. Making an element draws nothing. It is a description React reads later.

<li className="todo">  Buy milk</li>

{  type: 'li',  props: {    className: 'todo',    children: 'Buy milk'  }}

JSX

HTML-like syntax inside JavaScript, translated to function calls before it runs.

React element

A plain object describing one piece of the page. Cheap to make, never changed.

Props

The details an element carries: its attributes and what is inside it (children).

Inside JSX, { } holds any JavaScript expression: a piece of code that produces a value. A variable, a sum, a function call. React puts the value on the page.

1const name = 'Sam'2const left = 33
4const header = (5  <header>6    <h1>{name}’s to-dos</h1>7    <p>{left} left, {left * 10} minutes of work</p>8    <p>Today is {new Date().toDateString()}</p>9  </header>10)

This code runs: the preview draws what it returns as you type. Ignore the export default function line for now, it’s a component, and you’ll meet those at the end of this module. Change the values, or put your own expression inside a pair of braces.

1const name = 'Sam'2const left = 33
4export default function Header() {5  return (6    <header>7      <h1>{name}’s to-dos</h1>8      <p>{left} left, {left * 10} minutes of work</p>9      <p>Shouting: {name.toUpperCase()}</p>10    </header>11  )12}

JSX attributes are passed to JavaScript, so they follow JavaScript’s naming. A few differ from HTML. Values are strings in quotes, or any expression in braces.

1const box = (2  <input3    id="new-todo"4    className="field"5    placeholder="What needs doing?"6    maxLength={80}7    style={{ fontSize: 18 }}8  />9)

A JSX expression must have one outer tag, because it becomes one value. To group siblings without adding an extra element to the page, use a fragment: <> and </>.

const page = (  <h1>My to-dos</h1>  <ul>…</ul>)

const page = (  <>    <h1>My to-dos</h1>    <ul>…</ul>  </>)

The parentheses around multi-line JSX are only there so the code reads well. They don’t change what it means.

HTML forgives a missing </li> or a bare <br>. JSX doesn’t. Tags with nothing inside close themselves with />: <input />, <img />, <br />.

A component is a function that returns JSX. Its name starts with a capital letter. You use it like a tag, <App />, and React calls the function to find out what to draw.

1export default function App() {2  const name = 'Sam'3  return (4    <main>5      <h1>{name}’s to-dos</h1>6      <ul>7        <li>Buy milk</li>8        <li>Walk the dog</li>9      </ul>10    </main>11  )12}

Time to write some JSX that is checked. The preview shows your component as you type; Check runs the tests, which look at the page the way a person would.

1export default function RecipeCard() {2  const title = 'Pancakes'3  const servings = 44  return (5    <article>6      {/* TODO: a heading with the title, then "Serves 4" */}7      <ul>8        <li>Flour</li>9        <li>Eggs</li>10        <li>Milk</li>11      </ul>12    </article>13  )14}

• JSX is HTML-like syntax in JavaScript, translated before the browser runs it.
• Each tag becomes a React element: a plain object describing what to draw.
• { } holds a JavaScript expression; its value goes on the page.
• Attributes are camelCase: className, htmlFor, onClick; style takes an object.
• One outer tag per expression (use <>…</>), and close every tag.
• A component is a capitalised function that returns JSX.

Look at any app and you can draw boxes around its parts: a header, a list, each row in the list, a form at the bottom. In React each box can be a component. Small components are easier to read, test and reuse than one giant one.

1function Header() {2  return <h1>My to-dos</h1>3}4
5function TodoList() {6  return (7    <ul>8      <li>Buy milk</li>9      <li>Walk the dog</li>10    </ul>11  )12}13
14export default function App() {15  return (16    <main>17      <Header />18      <TodoList />19    </main>20  )21}

When React draws App, it meets <Header />, calls Header, and puts what it returns in that spot. Then the same for TodoList. This calling of components to find out what to show is called rendering.

Render

React calling your component to get the JSX it should show.

Parent and child

A component that uses another is its parent; the one it uses is its child.

Here is the app from the last slide, running. Write a Footer component that returns a paragraph, then use it inside App as <Footer />, under the list.

1function Header() {2  return <h1>My to-dos</h1>3}4
5function TodoList() {6  return (7    <ul>8      <li>Buy milk</li>9      <li>Walk the dog</li>10    </ul>11  )12}13
14export default function App() {15  return (16    <main>17      <Header />18      <TodoList />19    </main>20  )21}

As an app grows, move components into their own files. A file exports what others may use, and other files import it. There are two kinds of export.

// src/Header.tsxexport function Header() {  return <h1>My to-dos</h1>}
// src/App.tsximport { Header } from './Header'

// src/Header.tsxexport default function Header() {  return <h1>My to-dos</h1>}
// src/App.tsximport Header from './Header'

A file can have many named exports but only one default. Named exports keep the same name everywhere, which makes code easier to search, so many teams prefer them. ./Header means “the file Header in this folder”; the .tsx ending is left off.

1import  from ''

Each <Tag /> is a separate use of the component. Write it three times and React calls the function three times, drawing three copies. Right now every copy is identical; the next module shows how to give each one its own data.

1function Divider() {2  return <hr className="divider" />3}4
5function Page() {6  return (7    <>8      <Header />9      <Divider />10      <TodoList />11      <Divider />12    </>13  )14}

A book review shows a rating as stars. Write the star once, as a component, and use it as many times as you need.

1function Star() {2  // TODO: return a span holding ★3  return null4}5
6export default function Rating() {7  return (8    <section>9      <h2>The Hobbit</h2>10      <p>11        <Star />12      </p>13    </section>14  )15}

You can write a function inside another function, but never define a component inside another component. Each render would make a brand new function, React would see a different component every time, and it would throw away and rebuild that part of the page, losing anything typed into it.

function App() {  function Header() {    return <h1>My to-dos</h1>  }  return <Header />}

function Header() {  return <h1>My to-dos</h1>}
function App() {  return <Header />}

A pure function always returns the same result for the same inputs and changes nothing outside itself. React expects components to be pure: rendering only works out what to show. It must not change variables outside the component, talk to a server, or touch the DOM.

Remember <StrictMode> in main.tsx? While you develop, it calls each component twice and keeps one result. A pure component gives the same answer both times, so you notice nothing. An impure one shows its bug straight away. In the published app, it renders once.

• Split a page into components: boxes inside boxes, forming a tree.
• Rendering is React calling your components to find out what to show.
• Put components in their own files; share them with export and import.
• Define components at the top level of a file, never inside another component.
• Components must be pure: same inputs, same JSX, nothing changed outside.
• Strict Mode renders twice in development to catch impurities.

So far every TodoItem would show the same thing. Props (short for properties) let a parent pass information to each child, the way attributes pass information to an HTML tag. The parent writes them as attributes; React hands them to the child as one object.

1function TodoItem(props: { text: string }) {2  return <li>{props.text}</li>3}4
5function TodoList() {6  return (7    <ul>8      <TodoItem text="Buy milk" />9      <TodoItem text="Walk the dog" />10    </ul>11  )12}

props: { text: string } is TypeScript saying “props is an object with a text that is a string”. If a parent forgets text, or passes a number, your editor underlines it.

Writing props. everywhere gets long. JavaScript can destructure an object: pull its fields out into variables of the same name. Most React code does it in the parameter list, and names the props’ type so it reads well.

1type TodoItemProps = {2  text: string3  done: boolean4}5
6function TodoItem({ text, done }: TodoItemProps) {7  return (8    <li className={done ? 'done' : ''}>9      {text}10    </li>11  )12}

Prop

One input to a component, written like an attribute by its parent.

Destructuring

{ text, done } = props: taking fields out of an object into variables.

`type`

A TypeScript name for a shape of data, used to check it.

Text goes in quotes. Anything else goes in braces: numbers, true or false, arrays, objects, even functions. A prop written with no value at all means true.

1<TodoItem2  text="Buy milk"3  priority={2}4  done={false}5  tags={['shopping', 'today']}6  owner={{ name: 'Sam' }}7  highlighted8/>

The same BookCard is used three times, each with its own props. Change a prop, add a fourth book, or give BookCard a new prop, such as year, and show it.

1type BookProps = {2  title: string3  author: string4  pages: number5}6
7function BookCard({ title, author, pages }: BookProps) {8  return (9    <article>10      <h2>{title}</h2>11      <p>by {author}, {pages} pages</p>12    </article>13  )14}15
16export default function Shelf() {17  return (18    <main>19      <BookCard title="Emma" author="Jane Austen" pages={474} />20      <BookCard title="Dune" author="Frank Herbert" pages={412} />21      <BookCard title="Beloved" author="Toni Morrison" pages={324} />22    </main>23  )24}

A ? after a prop’s name in the type makes it optional. When the parent leaves it out, its value is undefined. Give it a default with = in the destructuring.

1type BadgeProps = {2  label: string3  tone?: 'info' | 'warning'4}5
6function Badge({ label, tone = 'info' }: BadgeProps) {7  return <span className={'badge ' + tone}>{label}</span>8}9
10<Badge label="Today" />            // tone is 'info'11<Badge label="Late" tone="warning" />

'info' | 'warning' is a union type: the value must be one of those exact strings. Pass tone="red" and the editor objects.

Whatever you put between a component’s opening and closing tags arrives as a special prop called children. It lets you build wrappers, like a card or a panel, that don’t need to know what they hold.

1import type { ReactNode } from 'react'2
3function Card({ title, children }: {4  title: string5  children: ReactNode6}) {7  return (8    <section className="card">9      <h2>{title}</h2>10      {children}11    </section>12  )13}14
15<Card title="Today">16  <TodoList />17</Card>

A component must never change its props. They belong to the parent, and React relies on them staying put while it renders. When something needs to change, the parent passes new props, and React renders the child again with them.

Props go from parent to child, never back up. This is one-way data flow. If you want to know where a value came from, follow the props upward until you find the component that made it. That makes React apps easier to debug.

• Props are a component’s inputs, written as attributes by its parent.
• React passes them as one object; destructure it in the parameters.
• Strings in quotes; anything else in braces. A bare prop means true.
• Optional props get ? in the type and a default with =.
• children holds what goes between the tags.
• Props are read-only and flow one way, from parent to child.

Writing each <TodoItem /> by hand only works for a fixed list. Real lists come from data: an array (an ordered list of values, in [ ]) of objects (groups of named values, in { }). Describe each to-do once, as data, and let code make the rows.

1export type Todo = {2  id: number3  text: string4  done: boolean5}6
7export const starterTodos: Todo[] = [8  { id: 1, text: 'Buy milk', done: false },9  { id: 2, text: 'Walk the dog', done: true },10  { id: 3, text: 'Call the dentist', done: false }11]

Arrays have a method called map. It runs a function on every item and returns a new array of the results. Map to-dos to JSX and you get an array of elements, which React draws in order.

1import { type Todo } from './todos'2import { TodoItem } from './TodoItem'3
4export function TodoList({ todos }: { todos: Todo[] }) {5  return (6    <ul>7      {todos.map((todo) => (8        <TodoItem9          key={todo.id}10          text={todo.text}11          done={todo.done}12        />13      ))}14    </ul>15  )16}

When the list changes, React compares the new rows with the old ones. A key is a name for each row, unique among its siblings. With keys, React knows that “Buy milk” moved, rather than thinking every row changed. Without them it warns you in the console.

todos.map((todo, index) => (  <TodoItem key={index} … />))

todos.map((todo) => (  <TodoItem key={todo.id} … />))

The position in the array is a poor key: delete the first to-do and every other row’s index shifts by one, so React matches rows to the wrong data. Use a stable id that belongs to the item itself.

filter is another array method: it keeps only the items for which your function returns true. Chain it before map to show part of a list.

1const open = todos.filter((todo) => !todo.done)2
3return (4  <ul>5    {open.map((todo) => (6      <TodoItem key={todo.id} text={todo.text} done={false} />7    ))}8  </ul>9)

1todos2  .((todo) => todo.done)3  .map((todo) => <li key={}>{todo.text}</li>)

The list below is drawn from an array. Add a to-do to the array, flip a done, or change the filter to keep the finished ones, and watch the preview follow the data.

1const todos = [2  { id: 1, text: 'Buy milk', done: false },3  { id: 2, text: 'Walk the dog', done: true },4  { id: 3, text: 'Water the plants', done: false }5]6
7export default function TodoList() {8  const open = todos.filter((todo) => !todo.done)9  return (10    <ul>11      {open.map((todo) => (12        <li key={todo.id}>{todo.text}</li>13      ))}14    </ul>15  )16}

A component is a function, so you can use an if before the JSX. Returning early is the clearest way to handle a whole different screen, like an empty list.

1function TodoList({ todos }: { todos: Todo[] }) {2  if (todos.length === 0) {3    return <p className="empty">Nothing to do. Enjoy.</p>4  }5  return (6    <ul>7      {todos.map((todo) => (8        <TodoItem key={todo.id} text={todo.text} done={todo.done} />9      ))}10    </ul>11  )12}

Inside braces you need expressions. Two cover nearly everything: a ? b : c to choose between two things, and a && b to show b only when a is true. React draws nothing for null, undefined, true and false.

1<li>2  {done ? <s>{text}</s> : text}3  {urgent && <span className="badge">Urgent</span>}4</li>

1<p>2  {todos.length && <span>{todos.length} to-dos</span>}3</p>

Put the module together: filter, map with keys, and a different screen when there is nothing to show.

1type Todo = { id: number; text: string; done: boolean }2
3const sample: Todo[] = [4  { id: 1, text: 'Buy milk', done: false },5  { id: 2, text: 'Walk the dog', done: true }6]7
8export default function TodoList({ todos = sample }) {9  // TODO: keep the open ones, and handle an empty list10  return (11    <ul>12      {todos.map((todo) => (13        <li key={todo.id}>{todo.text}</li>14      ))}15    </ul>16  )17}

• Keep lists as arrays of objects, and turn them into rows with map.
• Every row needs a key: unique among its siblings and stable, like an id.
• Use filter before map to show part of a list.
• Use if and an early return for a different screen; null shows nothing.
• Inside JSX, use a ? b : c and a && b, and never let a 0 sneak through.

To react to a click, give an element an onClick prop holding a function. This function is an event handler. React calls it when the event happens, not before. Handlers are where side effects belong: they may change things, unlike rendering.

1function ClearButton() {2  function handleClick() {3    alert('Clearing finished to-dos')4  }5  return <button onClick={handleClick}>Clear done</button>6}

A row doesn’t own the list, so it can’t change it. Instead the parent passes a function, and the row calls it with what happened. By habit, such props are named on plus the event: onToggle, onDelete.

1type Props = {2  todo: Todo3  onToggle: (id: number) => void4}5
6function TodoItem({ todo, onToggle }: Props) {7  return (8    <li>9      <input10        type="checkbox"11        checked={todo.done}12        onChange={() => onToggle(todo.id)}13      />14      {todo.text}15    </li>16  )17}

React calls a handler with an event object describing what happened. Two of its methods matter most. preventDefault() stops the browser’s own reaction, such as a form reloading the page. stopPropagation() stops the event from also reaching the elements around this one.

1function Row({ onOpen, onDelete }: RowProps) {2  return (3    <li onClick={onOpen}>4      Buy milk5      <button6        onClick={(event) => {7          event.stopPropagation()8          onDelete()9        }}10      >11        Delete12      </button>13    </li>14  )15}

State is data a component remembers between renders. useState is a Hook: a special React function, named with use, that hooks a component into a React feature. It returns two things: the current value, and a function to change it.

1import { useState } from 'react'2
3function Counter() {4  const [count, setCount] = useState(0)5  return (6    <button onClick={() => setCount(count + 1)}>7      Clicked {count} times8    </button>9  )10}

State

Data a component remembers between renders; changing it renders again.

Hook

A React function whose name starts with use, like useState.

Setter

The function useState returns for changing the value, like setCount.

The state is there, but nothing changes it yet. Give each button an onClick that calls the setter.

1import { useState } from 'react'2
3export default function Counter() {4  const [count, setCount] = useState(0)5  // TODO: an onClick on each button6  return (7    <div>8      <button>Clicked {count} times</button>9      <button>Reset</button>10    </div>11  )12}

React tells a component’s pieces of state apart by the order the Hooks are called in. So Hooks must be called in the same order on every render: at the top level of a component, never inside an if, a loop or a nested function.

function TodoItem({ todo }: Props) {  if (todo.done) {    const [open, setOpen] = useState(false)  }  // …}

function TodoItem({ todo }: Props) {  const [open, setOpen] = useState(false)  if (todo.done) {    // use open here  }  // …}

Every screen update goes through three steps. A render is triggered (by the first load, or by a setter). React renders: it calls your components to get new JSX and compares it with the last result. Then it commits: it changes only the DOM that differs.

State belongs to one place in the tree. Render two <Counter />s and each keeps its own count. State is also private: a parent can’t read a child’s state. If two parts need the same data, it has to live higher up (a later module).

Click each counter a few times: each keeps its own count. Then try the ideas below and watch what changes.

1import { useState } from 'react'2
3function Counter({ label }: { label: string }) {4  const [count, setCount] = useState(0)5  return (6    <button onClick={() => setCount(count + 1)}>7      {label}: {count}8    </button>9  )10}11
12export default function App() {13  return (14    <div>15      <Counter label="Apples" />16      <Counter label="Pears" />17    </div>18  )19}

• Pass a function to onClick; don’t call it. Name handlers handleX, handler props onX.
• Events bubble up; stopPropagation stops that, preventDefault stops the browser’s default.
• Local variables don’t survive renders or trigger them. State does both.
• const [value, setValue] = useState(initial); the setter stores and schedules a render.
• Hooks: top level only, same order every render.
• An update is trigger, render, commit. State is private to each instance.

Inside one render, a state variable never changes. Calling the setter doesn’t change count in the code that is running: it asks for the next render to have a new value. Think of each render as a photo, with its own fixed state.

1<button onClick={() => {2  setCount(count + 1)3  setCount(count + 1)4  setCount(count + 1)5}}>6  {count}7</button>

When a handler calls several setters, React doesn’t render after each one. It collects them in a queue and renders once when the handler has finished. This is batching. It is why setting three pieces of state in a row is fast and never shows a half-updated screen.

1function handleAdd() {2  setTodos([...todos, newTodo])3  setDraft('')4  setMessage('Added')5  // One render, with all three changes.6}

Snapshot

The fixed values of state during one render.

Batching

React grouping the setter calls of one event into a single render.

A setter also accepts a function, an updater. React calls it with the most recent value in the queue, so updates stack correctly. Use one whenever the new value depends on the old.

setCount(count + 1) // 0 + 1setCount(count + 1) // 0 + 1// next render: 1

setCount((c) => c + 1) // 0 → 1setCount((c) => c + 1) // 1 → 2// next render: 2

1setOpen(() => )

Both buttons call a setter three times. Click each and compare. Then change the first to use an updater, or mix the two kinds, and predict the result before you click.

1import { useState } from 'react'2
3export default function Score() {4  const [score, setScore] = useState(0)5
6  function addThreeWithValues() {7    setScore(score + 1)8    setScore(score + 1)9    setScore(score + 1)10  }11
12  function addThreeWithUpdaters() {13    setScore((s) => s + 1)14    setScore((s) => s + 1)15    setScore((s) => s + 1)16  }17
18  return (19    <div>20      <p>Score: {score}</p>21      <button onClick={addThreeWithValues}>+3 with values</button>22      <button onClick={addThreeWithUpdaters}>+3 with updaters</button>23    </div>24  )25}

React decides whether state changed by asking: is it the same object as before? If you change a field inside the old object, it is still the same object, so React may skip the render. Treat state as immutable (never changed): make a new object instead. The spread syntax ... copies all the fields of an object into a new one.

settings.showDone = falsesetSettings(settings)

setSettings({  ...settings,  showDone: false})

Mutate

Change an object or array in place.

Immutable

Never changed after it is made; you make a new one instead.

Spread `...`

Copies the fields of an object (or items of an array) into a new one.

The same rule holds for arrays. Methods like push, splice and sort change the array in place, so avoid them on state. Use ones that return a new array.

1function addTodo(text: string) {2  const todo = { id: Date.now(), text, done: false }3  setTodos((todos) => [...todos, todo])4}5
6function deleteTodo(id: number) {7  setTodos((todos) => todos.filter((t) => t.id !== id))8}

To tick a to-do, make a new array where that one item is a new object and every other item is left as it is.

1function toggleTodo(id: number) {2  setTodos((todos) =>3    todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t))4  )5}