¿Qué es el estado?

Hasta ahora todo estaba congelado: entraban datos, salía una página y nada cambiaba nunca. Las aplicaciones reales recuerdan cosas que cambian: el contador de «Me gusta», un menú abierto, el texto en un cuadro de búsqueda. Esa memoria se llama estado.

React proporciona estado a los componentes mediante el hook useState:

import { useState } from 'react';

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

Una línea, tres partes:

• count: el valor actual
• setCount: la función que lo cambia
• useState(0): el valor inicial

La regla de oro: nunca asignes valores directamente al estado. count = 5 genera un error, porque count es una const. Aunque pudiera cambiar, React no lo sabría. setCount(5) cambia el estado y vuelve a renderizar el componente. Ese nuevo renderizado es lo que actualiza la pantalla.