¿Qué es el estado?

Todo hasta ahora estaba congelado: los datos entraban, salía una página, nada cambiaba nunca. Las aplicaciones reales recuerdan las cosas que cambian: la cantidad de me gusta, un menú abierto, el texto en una caja de búsqueda. Esa memoria se llama estado.

React proporciona estado a los componentes a través del 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 al estado directamente. count = 5 cambia una variable que React no está observando. setCount(5) cambia el estado y re-renderiza el componente. Ese re-renderizado es lo que actualiza la pantalla.