State: data that changes while the page is open

A like button is one of the smallest programs people actually use. It stores a number, adds one when you click, and shows the result. Almost every difficulty in frontend development is hiding inside those three steps.

Start with the naive version, the one every beginner writes first.

let likes = 0;

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

like();
like();

React solves this by giving the value and the way to change it in the same breath. useState returns a pair: the value now, and a setter. Call the setter and the component runs again with the new value.

import { useState } from "react";

function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes} likes
    </button>
  );
}The value and the way to change it, returned together.

The two halves of that line have different jobs. likes is what this run of the component sees and draws. setLikes is the only honest way to change what the next run will see. A button whose label never changes is almost always a button that changes the variable and never calls the setter.

The same idea handles typing. A search box that loses what you typed is the classic symptom of a field nobody is remembering.

function SearchBox() {
  const [text, setText] = useState("");

  return (
    <form>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>You typed: {text}</p>
    </form>
  );
}The field shows what state holds, and the keystroke writes state back.

Now the trap that gets everybody, usually with a to-do list. Arrays and objects are not values the way numbers are: they are references to a place in memory. Changing the contents leaves the reference exactly where it was.

const [items, setItems] = useState(["Bread", "Tea"]);

function addBad(name) {
  items.push(name);
  setItems(items);
}

function addGood(name) {
  setItems([...items, name]);
}One of these two versions leaves the list on screen unchanged.

So there are two kinds of data in a component, and one question separates them: who is allowed to change it? Props are given from outside and read-only. State is owned inside and changeable. A counter with a configurable step needs both.

function Counter({ step }) {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + step)}>
      {count}
    </button>
  );
}

const a = <Counter step={1} />;
const b = <Counter step={5} />;The step is given from outside, the count is owned inside.