¿Qué es el estado?

Guardar las interacciones de los usuarios en una aplicación de React requiere algo más que un console.log. Aquí entra useState, la herramienta que te permite almacenar y actualizar información cada vez que alguien escribe, hace clic o interactúa con tu interfaz, y que además dispara un re-renderizado automático para reflejar esos cambios.

¿Qué es useState y por qué se importa desde React?

UseState es una función de React que crea un estado dentro de un componente. Al llamarla devuelve un array con dos elementos: el valor actual del estado y una función para actualizarlo.

Para usarla necesitas importar React explícitamente. Quizá notaste que en componentes anteriores no lo hacíamos, y eso pasa porque Create React App incluye un plugin de Babel que importa React por ti [02:32]. Si quieres prevenir errores futuros, importa React en cada componente.

¿Qué hace useState en React? Crea un estado dentro de un componente y devuelve un array con dos elementos: el valor actual y una función actualizadora. Cada vez que llamas a esa función, React re-renderiza el componente.

¿Por qué useState devuelve un array con dos elementos?

El estado en React es inmutable, así que no puedes reasignarlo con un signo igual. Necesitas una función actualizadora controlada por React para que maneje la inmutabilidad y el historial de estados sin romper nada [03:45].

La convención de nombres es clara:

• El primer elemento es el estado, por ejemplo searchValue.
• El segundo es el actualizador, con el prefijo set y camelCase, por ejemplo setSearchValue.
• Si tu estado se llamara patito, su actualizador sería setPatito.

UseState también acepta un valor inicial. En el caso del input de búsqueda, lo correcto es un string vacío para que aparezca el placeholder hasta que el usuario empiece a escribir.

¿Cómo conectar un input con el estado de React?

La propiedad value del input se enlaza directamente al estado. Así, lo que el usuario vea siempre será el reflejo del valor almacenado en React, no del comportamiento por defecto del HTML.

jsx const [searchValue, setSearchValue] = React.useState('');

<input value={searchValue} onChange={(event) => { setSearchValue(event.target.value); }} />

Si solo defines value={searchValue} sin actualizar el estado, el input se queda congelado: aunque el usuario teclee 56 letras, no aparece nada [06:50]. La razón es que el value está atado al estado, y si el estado nunca cambia, el input tampoco.

La solución es llamar a setSearchValue(event.target.value) dentro del onChange. Con eso, cada tecla actualiza el estado y el estado actualiza el input.

¿Cómo confirmar que el estado realmente guarda la información?

Un truco útil es colocar un console.log antes del return del componente, no dentro del evento. De esa forma compruebas que el estado está accesible en todo el componente, no solo dentro del onChange.

jsx console.log(Los usuarios buscan todos de ${searchValue});

Escribe "cortar cebolla" y verás en consola el log actualizándose letra por letra. Eso confirma que el dato vive en el estado y puede compartirse con otros componentes.

¿Por qué no basta con una variable normal de JavaScript?

Aquí está el detalle que mucha gente pasa por alto. Una variable común cambia su valor, pero no avisa a React de que la interfaz debe volver a renderizarse.

Imagina un componente TodoClick con una variable n = 0 y un botón que hace n = n + 1. Le das clic una vez, dos veces, tres veces, y aunque la variable internamente sí suma, la interfaz sigue mostrando cero [12:20]. React no recibió la señal de re-render.

Cuando reemplazas esa variable por un estado con React.useState(0) y llamas a setState(state + 1) en el onClick, ocurre la magia: el estado sube y la interfaz se actualiza en sincronía.

¿Por qué un estado provoca re-render y una variable no? Porque el actualizador del estado le notifica a React que debe volver a renderizar el componente. Una variable de JavaScript cambia silenciosamente sin avisar al motor de render.

¿Qué es un re-renderizado en React?

Es el proceso por el cual React vuelve a procesar un componente después de un cambio de estado. La fábrica de render recibe el componente con su nuevo estado, genera el HTML y JavaScript actualizados, y los envía al navegador.

El flujo se ve así:

1. El usuario dispara un evento, por ejemplo un clic.
2. El estado cambia gracias a la función actualizadora.
3. React detecta el cambio y manda el componente afectado a la fábrica de render.
4. La fábrica genera el nuevo HTML y lo refleja en el navegador.

¿Qué es el Virtual DOM y por qué importa?

React no manipula el DOM real directamente cada vez que algo cambia. En su lugar, mantiene una copia llamada virtual DOM. Cuando hay un re-render, los cambios se aplican primero a esa copia, se comparan con el DOM real y solo se actualizan las partes que realmente cambiaron [16:40].

Esto evita que toda la aplicación se redibuje en cada interacción. Solo los componentes con estado modificado pasan por la fábrica, lo que mantiene a React rápido incluso en aplicaciones grandes.

Con el estado bien entendido, el siguiente paso es usarlo para contar todos, buscarlos, completarlos y eliminarlos. ¿Ya tienes claro cómo conectar un input con useState? Cuéntame en los comentarios qué estado vas a crear en tu próximo componente.