Cómo usar useState para manejar estado en React

El estado en React es el concepto que transforma una interfaz estática en una que reacciona a lo que hace el usuario. Si vienes de aprender componentes y quieres que tu aplicación responda cuando alguien escribe o presiona un botón, aquí aprenderás a usar el hook useState para guardar y modificar información dentro de tus componentes.

Hasta este punto, una barra de búsqueda con campos de ciudad, tipo y huéspedes puede verse bien, pero si escribes "Bogotá" y presionas buscar, no pasa nada. Eso ocurre porque es solo HTML renderizado dentro de un componente. Para darle vida necesitamos estado.

Qué es el estado y para qué sirven los hooks en React

El estado es el lugar donde se almacena la información dentro de un componente. Puede tener valores iniciales y también puede modificarse mientras el usuario interactúa.

Los hooks son funciones que nos permiten interactuar con la data de nuestros componentes. React trae varios hooks nativos o incorporados, y el más importante para empezar es useState [02:00].

¿Qué es useState en React? Es un hook nativo que te permite guardar información que cambia en la interfaz. Recibe un valor inicial y devuelve el valor actual junto con una función para actualizarlo.

Por qué necesito fragments antes de agregar estado

Antes de tocar el estado, hay un obstáculo común. Al intentar agregar un nuevo elemento HTML, como un paragraph junto a un section, React arroja un error. La razón es clave: dentro de un componente solo puede haber un elemento HTML padre.

Una solución rápida es envolver todo en un div, pero no siempre conviene porque ese div extra se renderiza en el DOM y puede desordenar tus estilos.

React resolvió esto con los fragments, un elemento nativo que agrupa elementos sin renderizar un contenedor adicional. Tienes dos formas de usarlo:

• Escribir Fragment completo, pero entonces debes importarlo desde React o tu aplicación desaparece con el error "fragment no está definido".
• Usar solo las llaves vacías <> </>, la forma más sencilla y que no requiere importación [03:30].

Con los fragments resueltos, ya podemos concentrarnos en el estado.

Cómo se importa y se define useState en un componente

El manejo de estado con useState tiene tres partes fundamentales que conviene memorizar.

1. El import del hook: import { useState } from 'react' [05:20].
2. El seteo o declaración del estado al inicio de la función del componente, con su valor inicial dentro de useState().
3. El uso del valor para mostrarlo en la interfaz.

Cuando declaras el estado, React incluso te sugiere nombres coherentes con tu contenido. Si el componente maneja una ciudad, propone algo como city y setCity. El valor inicial va siempre dentro de la función, por ejemplo un string vacío.

Si cambias ese valor inicial a "Bogotá", la interfaz mostrará "Bogotá" sin que toques nada más, porque city ya arranca con ese valor. Ese es el comportamiento más primitivo del estado: cómo se lee y cómo se renderiza.

¿Cuántos estados puedo tener en un componente? Los que necesites. En este ejemplo hay dos: uno para la ciudad que se escribe (city) y otro para la ciudad ya buscada (searchCity), ambos iniciando vacíos.

Cómo conecto el estado con value y onChange

Aquí viene lo interesante. Para que el input se conecte con el estado necesitas dos propiedades trabajando juntas.

Primero, la propiedad value recibe city, así el input siempre refleja el valor guardado en el estado. Pero eso solo no basta, porque todavía no hay forma de cambiarlo.

Ahí entra onChange, que lee un evento y, cada vez que presionas una tecla, dispara la función que actualiza el estado con el nuevo valor. Cuando escribes "Bogotá", el estado se actualiza en vivo y lo ves reflejado de inmediato en pantalla.

Para capturar la búsqueda al presionar el botón, el section debe convertirse en un form y recibir un onSubmit. Esa función lee el evento del submit, evita el comportamiento por defecto con preventDefault, y usa un trim de city para guardar la ciudad buscada en searchCity.

¿Cuál es la diferencia entre value y onChange en un input? value muestra el dato actual del estado en el input y onChange captura cada cambio del usuario para actualizar ese estado. Juntos crean un input controlado.

La diferencia se nota al final: mientras city cambia en vivo con cada tecla, searchCity solo se actualiza cuando presionas buscar y se dispara el submit del formulario. Así tienes dos estados que inician vacíos, una función que los setea y otra que se actualiza mediante eventos de teclado.

Qué otras formas existen para manejar estado avanzado

useState es la forma nativa de manejar estado en React, pero no es la única. Para casos más complejos existen metodologías dedicadas al manejo avanzado de estado [09:40].

• Redux, para gestión centralizada del estado global.
• Zustand, una alternativa ligera y sencilla.
• Tanstack Query, enfocada en el manejo de datos del servidor.

Cada una merece su propio espacio y se aborda más adelante en la ruta. Por ahora, dominar useState te da la base para conectar tu interfaz con eventos reales del usuario.

¿Ya intentaste crear tu primer input controlado? Cuéntame en los comentarios con qué estado quieres experimentar primero.