Cuando trabajas con componentes funcionales en React, cada estado vive en su propia línea de código, con su propia variable y su propio actualizador. Esto les da independencia total, pero también plantea retos importantes cuando una sola acción del usuario necesita modificar varios estados a la vez. Entender cómo y dónde actualizar cada estado es fundamental para evitar errores sutiles que pueden romper la experiencia de tu aplicación.
¿Cómo funcionan los estados independientes con useState?
A diferencia de los componentes de clase, donde todo el estado vive dentro de this.state como un único objeto, los estados independientes se declaran por separado con useState. Cada uno tiene su variable y su función actualizadora [0:42]:
value y setValue: almacena lo que el usuario escribe en el input.error y setError: indica si el código de seguridad es incorrecto.loading y setLoading: controla si la aplicación está en estado de carga.
Esto significa que no existe un setState general. Cada estado se actualiza de forma completamente aislada, lo cual es limpio y predecible en escenarios simples, pero requiere coordinación cuidadosa cuando varios estados deben cambiar al mismo tiempo.
¿Cómo capturar el valor dinámico de un input?
Para conectar un input con el estado, se necesitan dos cosas [1:23]:
- Asignar
value como el valor del input, vinculándolo al estado declarado en useState.
- Escuchar el evento
onChange y llamar a setValue(event.target.value) para actualizar el estado con lo que el usuario escribe.
Cada pulsación de tecla dispara una actualización del estado. Un console.log(value) permite comprobar que el estado se sincroniza correctamente con cada cambio en el input [2:24].
¿Cómo validar el código de seguridad contra un valor esperado?
Se define una constante fuera del componente, siguiendo la convención de mayúsculas con guiones bajos para variables que nunca cambian [2:50]:
javascript
const SECURITY_CODE = "paradigma";
Dentro del useEffect, cuando el estado loading es true, se simula una llamada al backend con setTimeout. Al terminar la espera, se compara value con SECURITY_CODE [3:30]:
javascript
if (value === SECURITY_CODE) {
setLoading(false);
setError(false);
} else {
setLoading(false);
setError(true);
}
Si el código coincide, se quita la carga sin mostrar error. Si no coincide, se quita la carga y se activa el estado de error.
¿Qué problema surge al actualizar varios estados independientes?
Aquí aparece el dilema central de los estados independientes [5:50]. Cuando el usuario escribe un código incorrecto y luego intenta con el correcto sin recargar la página, ocurre lo siguiente:
- El estado de error se activó con
setError(true) en el primer intento.
- Al hacer clic en comprobar de nuevo,
setLoading(true) se ejecuta, pero nadie limpia el error antes de la nueva validación.
- Durante la carga, el mensaje de error sigue visible.
- Peor aún: si el código ahora es correcto, el error persiste porque no se llama a
setError(false) en el flujo adecuado [6:40].
Este comportamiento incorrecto ocurre porque cada actualizador es independiente. No hay un mecanismo automático que resetee los demás estados cuando uno cambia. Cuando una interacción del usuario implica cambiar varios estados en una misma acción, hay que llamar a múltiples actualizadores en bloque, literalmente uno tras otro [7:10].
¿Dónde es correcto actualizar cada estado?
La pregunta más importante no es solo cómo corregir el bug, sino dónde colocar cada actualización de estado. Existen varias formas de resolverlo:
- Resetear
error a false justo cuando el usuario hace clic en comprobar, antes de entrar al efecto.
- Limpiar el error dentro del
useEffect, al inicio de la validación.
- Llamar a
setError(false) explícitamente en ambas ramas del condicional.
Cada enfoque tiene implicaciones distintas en legibilidad y en el momento exacto en que el usuario deja de ver el mensaje de error. No existe una única solución correcta; lo relevante es entender que los estados independientes te obligan a ser explícito y deliberado con cada actualización.
Este tipo de retos crecen a medida que la aplicación escala. ¿Cuántas formas distintas se te ocurren para resolver este problema? Comparte tu solución y compárala con las alternativas.
