Fundamentos de ProgramaciónFrontend Development●Principiante

useState Hook

120 min

0 vistas

01 enero 2026

Manejo de estado local con `useState` y actualización correcta.

Introducción a useState

useState permite agregar estado local a un componente funcional.
Cada llamada devuelve un valor y su setter para actualizarlo.

Actualización correcta de estado

Para estados dependientes del anterior, usa la función callback.
Para objetos/arrays, crea copias con spread para mantener inmutabilidad.

Reglas básicas de uso del hook

Solo se llama en el nivel superior del componente (no dentro de loops, condicionales o funciones anidadas).
Solo se usa dentro de componentes de React o custom hooks.
Mantener el orden de los hooks estable evita bugs con el estado.

Inicialización perezosa

Cuando el estado inicial es costoso, pasa una función a useState.
React la ejecuta una sola vez en el primer render.

Estado derivado y fuente de verdad

Evita duplicar datos que se pueden calcular desde otros estados/props.
Prefiere un único estado "fuente de verdad" y deriva el resto en render.

Actualizaciones en lote (batching)

setState es asíncrono; no confíes en el valor inmediato después de actualizar.
React puede agrupar múltiples actualizaciones para mejorar rendimiento.

Errores comunes a evitar

Mutar el estado directamente (obj.prop = ...).
Reemplazar un objeto sin conservar propiedades que necesitas.
Usar índices como key cuando la lista cambia de orden o se edita.

Caso práctico: Todo App

CRUD de tareas con filtros y contador.

Ejemplos de Código

5 ejemplos

Estado básico

javascript

1const [count, setCount] = useState(0);

Estado con objeto

javascript

1const [user, setUser] = useState({ nombre: "", email: "" });
2setUser((prev) => ({ ...prev, email: "test@mail.com" }));

Estado con arrays

javascript

1const [items, setItems] = useState([]);
2setItems([...items, { id: Date.now(), texto: "Nueva" }]);

Lazy init

javascript

1const [count, setCount] = useState(() => {
2  const saved = localStorage.getItem("count");
3  return saved ? Number(saved) : 0;
4});

Toggle state

javascript

1const [isOpen, setIsOpen] = useState(false);
2setIsOpen((prev) => !prev);

Recursos

3 recursos disponibles

¡Hora de Practicar!

PrácticaPrincipiante15 min

Práctica guiada - Todo App

Práctica

Crear una Todo App con agregar, completar y eliminar tareas.

Desafío de Código

EjercicioPrincipiante15 min

Ejercicios - useState

Ejercicios

(1) Contador con +3, (2) formulario controlado, (3) lista editable.

Documentación Oficial

DocumentaciónPrincipiante15 min

useState Hook

Explicación oficial del hook useState.

useState