12. Hook useState en React
Tutorial: 12. Hook useState en React
¿Qué son los Hooks?
Los Hooks son una innovadora incorporación que React introdujo a partir de su versión 16.8. Son funciones especiales que nos permiten gestionar el estado en componentes funcionales, algo que antes solo era posible con componentes de clase.
Características principales:
Manejo de estado en componentes funcionales
Aceptan un valor inicial que podemos modificar dinámicamente
No requieren escribir clases - simplifican enormemente el código
Permiten compartir estado entre diferentes componentes
Implementación paso a paso del Hook useState
Vamos a crear un contador interactivo para entender cómo funciona useState:
Paso 1: Importar useState
javascript
import { useState } from 'react';
Paso 2: Declarar el estado en nuestro componente
javascript
export default function Welcome(props) {
const [counter, setCounter] = useState(0);
// counter: variable que almacena el valor actual
// setCounter: función para actualizar el valor
// useState(0): inicializamos el contador en 0
}
Paso 3: Desestructurar las props (si es necesario)
javascript
const { message, name } = props;
Paso 4: Mostrar el estado en la interfaz
javascript
return (
<div>
<h1>Hola, {name}</h1>
<h2>Contador de React con Hooks</h2>
<h4>El número del contador es {counter}</h4>
{/* Aquí mostramos el valor actual del contador */}
</div>
);
Paso 5: Actualizar el estado con un botón
javascript
<button type="submit" onClick={() => setCounter(counter + 1)}>
Sumar contador
</button>
Código completo del componente
javascript
import { useState } from 'react';
export default function Welcome(props) {
// Declaramos nuestro estado: counter inicia en 0
const [counter, setCounter] = useState(0);
// Desestructuramos las props
const { message, name } = props;
return (
<div>
<h1>Hola, {name}</h1>
<h2>Contador de React con Hooks</h2>
{/* Mostramos el valor actual del contador */}
<h4>El número del contador es {counter}</h4>
{/* Botón para incrementar el contador */}
<button type="submit" onClick={() => setCounter(counter + 1)}>
Sumar contador
</button>
</div>
);
}
¿Cómo funciona?
Inicialización: useState(0) establece el valor inicial del contador en 0
Lectura del estado: {counter} muestra el valor actual en la interfaz
Actualización del estado: setCounter(counter + 1) incrementa el valor en 1
Re-renderizado automático: Cada vez que setCounter se ejecuta, React actualiza automáticamente la interfaz
Ventajas de usar useState
✅ Código más limpio y conciso - sin clases complejas
✅ Fácil de entender y mantener - lógica más lineal
✅ Reutilizable - podemos usar múltiples estados en un componente
✅ Reactivo - los cambios se reflejan inmediatamente en la UI
✅ Compartible - podemos pasar el estado a otros componentes mediante props
Posibles extensiones
Puedes modificar este ejemplo para:
Agregar un botón para restar
Crear un botón de reset
Implementar contadores múltiples
Compartir el estado con componentes hijos
Conclusión
El Hook useState es una herramienta fundamental en React que simplifica enormemente el manejo de estado en aplicaciones modernas. Con esta funcionalidad, puedes crear interfaces interactivas y dinámicas de manera eficiente, manteniendo un código limpio y fácil de mantener.
¡Ahora estás listo para implementar estado en todos tus componentes funcionales! 🚀
useState de React: Explicación clara y sencilla
useState es un hook de React que nos permite agregar estado a componentes funcionales.
Concepto básico
Imagina que tienes una variable que, cuando cambia, React debe volver a mostrar (renderizar) el componente para reflejar ese cambio. Ahí necesitas useState.
Sin useState (no funciona bien):
jsx
function Contador() {
let contador = 0;
const incrementar = () => {
contador += 1;
console.log(contador); // Cambia, pero React no lo muestra
};
return (
<div>
<p>Contador: {contador}</p>
<button onClick={incrementar}>+1</button>
</div>
);
}
Con useState (funciona correctamente):
jsx
import { useState } from 'react';
function Contador() {
// useState devuelve un array con dos elementos:
// [valorActual, funciónParaCambiarlo]
const [contador, setContador] = useState(0);
const incrementar = () => {
// setContador actualiza el valor y React re-renderiza
setContador(contador + 1);
};
return (
<div>
<p>Contador: {contador}</p>
<button onClick={incrementar}>+1</button>
</div>
);
}
Sintaxis básica
javascript
const [estado, setEstado] = useState(valorInicial);
estado: Variable que almacena el valor actual
setEstado: Función para actualizar el estado
valorInicial: Valor inicial del estado (puede ser cualquier tipo)
Ejemplos prácticos
1. Contador simple
jsx
function Contador() {
const [contador, setContador] = useState(0);
return (
<div>
<p>Valor: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Aumentar</button>
<button onClick={() => setContador(contador - 1)}>Disminuir</button>
<button onClick={() => setContador(0)}>Reiniciar</button>
</div>
);
}
2. Mostrar/ocultar elemento
jsx
function MostrarOcultar() {
const [mostrar, setMostrar] = useState(false);
return (
<div>
<button onClick={() => setMostrar(!mostrar)}>
{mostrar ? 'Ocultar' : 'Mostrar'} texto
</button>
{mostrar && <p>¡Texto secreto revelado!</p>}
</div>
);
}
3. Input de formulario
jsx
function Formulario() {
const [nombre, setNombre] = useState('');
const [edad, setEdad] = useState('');
const manejarSubmit = (e) => {
e.preventDefault();
alert(`Hola ${nombre}, tienes ${edad} años`);
};
return (
<form onSubmit={manejarSubmit}>
<input
type="text"
placeholder="Tu nombre"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
/>
<input
type="number"
placeholder="Tu edad"
value={edad}
onChange={(e) => setEdad(e.target.value)}
/>
<button type="submit">Enviar</button>
<p>Nombre: {nombre} | Edad: {edad}</p>
</form>
);
}
4. Lista de tareas simple
jsx
function ListaTareas() {
const [tareas, setTareas] = useState([]);
const [nuevaTarea, setNuevaTarea] = useState('');
const agregarTarea = () => {
if (nuevaTarea.trim()) {
setTareas([...tareas, nuevaTarea]);
setNuevaTarea('');
}
};
const eliminarTarea = (index) => {
setTareas(tareas.filter((_, i) => i !== index));
};
return (
<div>
<input
value={nuevaTarea}
onChange={(e) => setNuevaTarea(e.target.value)}
placeholder="Nueva tarea"
/>
<button onClick={agregarTarea}>Agregar</button>
<ul>
{tareas.map((tarea, index) => (
<li key={index}>
{tarea}
<button onClick={() => eliminarTarea(index)}>Eliminar</button>
</li>
))}
</ul>
</div>
);
}
Reglas importantes de useState
Solo en componentes funcionales: No se puede usar en componentes de clase
Llamar siempre al inicio: No dentro de condicionales, bucles o funciones anidadas
Los cambios son asíncronos: El estado no cambia inmediatamente después de llamar a setEstado
Re-renderizado: Cada cambio de estado hace que React vuelva a renderizar el componente
Tipos de datos comunes
jsx
// String
const [nombre, setNombre] = useState('Juan');
// Number
const [edad, setEdad] = useState(25);
// Boolean
const [activo, setActivo] = useState(true);
// Array
const [lista, setLista] = useState([]);
// Object
const [usuario, setUsuario] = useState({ nombre: '', edad: 0 });
// Multiple estados
const [contador, setContador] = useState(0);
const [texto, setTexto] = useState('');
Consejos para principiantes
Nombres descriptivos: [user, setUser] en lugar de [data, setData]
Actualización de objetos/arrays: Usa spread operator para no mutar el estado
jsx
// Correcto para objetos
setUsuario({...usuario, nombre: 'Nuevo nombre'});
// Correcto para arrays
setLista([...lista, nuevoElemento]);
Estado inicial complejo: Puedes usar funciones para el valor inicial
jsx
const [datos, setDatos] = useState(() => {
// Cálculo inicial complejo
return calcularValorInicial();
});
useState es tu herramienta principal para manejar datos que cambian con el tiempo en React. ¡Comienza con ejemplos simples y luego avanza a casos más complejos!
Comentarios
Publicar un comentario