Hook useState

useState le da memoria a tu componente. Sin él, cosas como contadores, campos de texto y switches se reiniciarían cada vez que se actualiza la pantalla.

const [count, setCount] = useState(0);

El patrón

Cada llamada a useState te devuelve dos cosas:

1. El valor actual (count) — úsalo para mostrar datos.
2. Una función para actualizarlo (setCount) — llámala para cambiar el valor. React entonces vuelve a ejecutar tu función de componente — a esto se le llama un re-render.

El argumento de useState(0) es el valor inicial, que solo se usa en el primer renderizado.

Cómo actualizar el estado

Cuando llamas a la función setter, React programa un nuevo renderizado con el valor actualizado:

<Button title="Sumar 1" onPress={() => setCount(count + 1)} />

El nuevo valor no está disponible de inmediato — aparece en el siguiente re-render, no justo después de llamar al setter.

Patrones comunes en Expo

// Alternar visibilidad
const [visible, setVisible] = useState(false);

// Guardar lo que escribe el usuario
const [name, setName] = useState("");

// Almacenar una lista
const [items, setItems] = useState<string[]>([]);

Regla general: Si un valor cambia con el tiempo y afecta lo que el usuario ve, debe ir en el estado.