useState en React: cómo guardar y actualizar estado

El estado en React es el lugar donde se almacena la información que cambia dentro de tu interfaz, y sin él tu aplicación solo muestra HTML estático que no reacciona a lo que hace el usuario. Aquí aprenderás a usar el hook useState para guardar y actualizar datos, algo esencial si empiezas a crear componentes interactivos.

¿Por qué mi interfaz no reacciona sin estado?

Al inicio, un componente como el SearchBar con campos de ciudad, tipo, huéspedes y un botón de buscar es solo HTML renderizado dentro de React. Escribes "Bogotá", presionas buscar y no pasa nada.

Para que algo cambie necesitas estado, ese lugar donde se guarda información que puede tener valores iniciales y luego modificarse. Y aquí entran los hooks.

¿Qué es un hook en React? Es una función que te permite interactuar con la data dentro de tus componentes. React trae hooks nativos como useState, y no necesitas instalarlos aparte.

En el minuto [00:38] se explica que los hooks son funciones incorporadas, y de todos ellos useState es uno de los dos más importantes que vas a usar constantemente.

¿Cómo agrego elementos sin romper el componente?

Cuando quisimos mostrar la búsqueda reciente agregamos una etiqueta paragraph junto a un section, y apareció un error. La razón es simple: dentro de un componente de React solo puede haber un elemento HTML padre.

Tienes dos caminos para resolverlo:

• Envolver todo en un div, aunque esto agrega un elemento extra que puede desordenar tus estilos.
• Usar un Fragment, el elemento nativo de React que agrupa sin renderizar nada visible.

Hay un detalle práctico. Si escribes la palabra completa Fragment, debes importarla o la app se rompe con el mensaje "fragment no está definido", como se ve en el minuto [01:55]. La forma más sencilla es usar solo las llaves vacías <> </> sin importar nada.

jsx <>

<section>...</section> <p>...</p> </>

Con esto tu aplicación sigue renderizando todos los elementos sin agregar nodos innecesarios al DOM.

¿Cómo funciona useState paso a paso?

El manejo de estado con useState tiene tres partes clave que vale la pena memorizar.

1. Importar el hook: import { useState } from 'react'.
2. Definir el estado al inicio de la función del componente, con su valor inicial dentro del paréntesis.
3. Usar la variable para mostrarla en la interfaz.

En el ejemplo, el editor sugiere la estructura basándose en el contenido del componente:

jsx const [city, setCity] = useState("");

Aquí city guarda el valor y setCity es la función que lo cambia. El string vacío es el valor inicial. Si lo dejas vacío y lo renderizas donde dice la búsqueda, aparece "sin búsqueda". Pero si cambias el valor inicial a "Bogotá", la interfaz ahora muestra "Bogotá" sin tocar nada más, porque city ya trae un valor por defecto desde [03:40].

¿Para qué sirve la función setCity de useState? Es la única forma correcta de actualizar el estado. Al llamarla con un nuevo valor, React vuelve a renderizar el componente con la información actualizada.

¿Por qué necesito dos estados en un mismo componente?

El SearchBar maneja dos ideas distintas: la ciudad que estás escribiendo y la ciudad que ya buscaste. Por eso creamos un segundo estado, searchCity, que también inicia vacío.

Esto tiene sentido porque puedes seguir cambiando el texto del input después de haber ejecutado una búsqueda. Separar ambos valores evita confundir lo que se escribe con lo que se confirma.

¿Cómo conecto el estado con el input y el formulario?

Para capturar lo que escribe el usuario, el section debe convertirse en un form, porque el formulario te da acceso a la propiedad onSubmit, que dispara un evento cuando guardas la información.

La función que maneja ese envío hace tres cosas:

• Lee el evento del submit.
• Evita el comportamiento por defecto del navegador con preventDefault.
• Guarda la ciudad usando setSearchCity con un trim de city para limpiar espacios.

Después conectamos el input con dos propiedades. La primera es value, que amarra el input al estado city para que siempre refleje su valor. La segunda es onChange, que lee cada evento de tecla y actualiza el estado con el nuevo valor.

jsx <input type="text" value={city} onChange={(e) => setCity(e.target.value)} />

Y aquí viene lo interesante. Cada vez que presionas una tecla, onChange dispara setCity y el estado se actualiza en vivo. Cuando enlazamos la vista al estado city, ves cómo cambia "Bogotá" letra por letra. Pero al cambiar la vista a searchCity, el texto ya no se actualiza mientras escribes, solo cuando presionas buscar, porque ese valor se setea dentro del submit, como se muestra hacia el minuto [07:30].

¿Cuál es la diferencia entre value y onChange en un input? value muestra el valor actual del estado en el campo, y onChange detecta cuándo el usuario escribe para actualizar ese estado. Juntos forman un input controlado.

¿useState es la única forma de manejar estado en React?

No. useState es la manera nativa y la más directa para empezar, pero existen otras metodologías pensadas para manejos avanzados de estado.

Entre las que se mencionan destacan:

• Redux, para estado global complejo.
• Substance, como alternativa de manejo de estado.
• Tanstack Query, orientada a datos que vienen de servidores.

Con dos estados guardados que inician vacíos, una función que los setea y otro que se actualiza con eventos de teclado, ya tienes la base para conectar tu interfaz con acciones reales del usuario.

¿Te animas a agregar un tercer estado a tu propio SearchBar? Cuéntame en los comentarios cómo lo resolverías.