Estado: datos que cambian mientras la pagina esta abierta

Un botón de me gusta es uno de los programas más pequeños que la gente realmente usa. Guarda un número, le suma uno cuando haces clic y muestra el resultado. Casi todas las dificultades del desarrollo frontend se esconden dentro de esos tres pasos.

Empieza por la version ingenua, la que todo principiante escribe primero.

let likes = 0;

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

like();
like();

React resuelve esto entregando el valor y la manera de cambiarlo en la misma frase. useState devuelve un par: el valor de ahora y un setter. Llama al setter y el componente se ejecuta otra vez con el valor nuevo.

import { useState } from "react";

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

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes} likes
    </button>
  );
}El valor y la manera de cambiarlo, devueltos juntos.

Las dos mitades de esa línea tienen trabajos distintos. likes es lo que esta pasada del componente ve y dibuja. setLikes es la única forma honesta de cambiar lo que verá la siguiente pasada. Un botón cuya etiqueta nunca cambia es casi siempre un botón que cambia la variable y nunca llama al setter.

La misma idea sirve para escribir. Un cuadro de búsqueda que pierde lo que escribiste es el síntoma clásico de un campo que nadie está recordando.

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

  return (
    <form>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>You typed: {text}</p>
    </form>
  );
}El campo muestra lo que guarda el estado, y cada tecla escribe de vuelta en el estado.

Ahora viene la trampa que atrapa a todo el mundo, casi siempre con una lista de tareas. Los arreglos y los objetos no son valores como los números: son referencias a un lugar en la memoria. Si cambias el contenido, la referencia se queda exactamente donde estaba.

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

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

function addGood(name) {
  setItems([...items, name]);
}Una de estas dos versiones deja la lista en pantalla sin cambios.

Así que en un componente hay dos tipos de datos, y una sola pregunta los separa: quién tiene permitido cambiarlos. Las propiedades llegan desde afuera y son de solo lectura. El estado se posee adentro y se puede cambiar. Un contador con un paso configurable necesita las dos cosas.

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} />;El paso llega desde afuera, el contador se posee adentro.