Desarrollo Móvil●Principiante

Hooks con TypeScript

120 min

01 enero 2026

Uso de useState, useEffect y custom hooks tipados en apps móviles.

useState y useEffect

typescript
1const [count, setCount] = useState(0);
2const [name, setName] = useState<string>("Juan");
3const [user, setUser] = useState<User | null>(null);
4useEffect(() => {
5  /* ... */
6}, []);

Custom Hooks

typescript
1function useToggle(initialValue: boolean = false): [boolean, () => void] {
2  const [value, setValue] = useState(initialValue);
3  const toggle = () => setValue((v) => !v);
4  return [value, toggle];
5}

Ejemplos de Código

3 ejemplos

Destructuring y Spread

javascript

1const user = {
2  name: "María",
3  age: 25,
4  email: "maria@example.com",
5  location: "Madrid",
6};
7const { name, email } = user;
8const { name: userName, age: userAge } = user;

Métodos de Arrays

javascript

1const products = [
2  { id: 1, name: "iPhone", price: 999, category: "electronics" },
3  { id: 2, name: "Camisa", price: 29, category: "clothing" },
4  { id: 3, name: "iPad", price: 599, category: "electronics" },
5];
6const productNames = products.map((p) => p.name);

useToggle Hook

javascript

1function useToggle(initialValue: boolean = false): [boolean, () => void] {
2  const [value, setValue] = useState(initialValue);
3  const toggle = () => setValue((v) => !v);
4  return [value, toggle];
5}

Recursos

4 recursos disponibles

Taller Práctico

TallerIntermedio60 min🟡 IA con bitácora

Proyecto de la Semana

Lista de Tareas con TypeScript

Crea una app de tareas con tipado fuerte, hooks y manejo de estado. Debe permitir agregar, completar y eliminar tareas.

Documentación Oficial

DocumentaciónPrincipiante30 min

Documentación útil

Desafío de Código

EjercicioIntermedio30 min🔴 Sin IA

Ejercicios

Refactoriza componentes a TypeScript.
Agrega validación de tipos en props.
Implementa un custom hook para filtrar tareas.
Añade persistencia local (AsyncStorage).

Reto de Lectura

Reto de LecturaPrincipiante60 min🟢 IA requerida

Auditoría IA #1 — El componente con hooks generado

Primera auditoría del semestre: genera con tu IA un componente RN con estado tipado y destrózalo con la checklist — hábitos web, tipos que mienten y estado mal manejado.

Paso 1 — Genera (10 min). Pídele a tu IA:

"Hazme un componente de React Native con TypeScript que muestre una lista de tareas con contador de completadas, usando useState, con estilos"

Paso 2 — Audita (40 min):

#	Capa	Pregunta clave
1	Hábitos web (S1)	¿Se coló un div, un onClick, un px-string, un CSS?
2	Estructura RN (S2)	¿Todo texto en `<Text>`? ¿El contenedor tiene `flex: 1`? ¿Estilos en camelCase con StyleSheet?
3	Tipos (S4)	¿Hay `any`, `as` o `!`? ¿El estado tiene tipo explícito (`useState<Tarea[]>`) o infirió `never[]`?
4	Estado	¿Muta el array o construye uno nuevo? ¿El contador es estado aparte (redundante) o se calcula del array?
5	Sabotaje	Córrelo en Expo Snack. Marca y desmarca rápido varias tareas: ¿el contador siempre cuadra?

Paso 3 — Informe (entregable): prompt exacto, 3+ hallazgos con línea y consecuencia, tu versión corregida corriendo en Snack, y qué le pedirías distinto al prompt la próxima vez.

La solución no se publica. Se revisa en voz alta en el laboratorio, después de que trabajaste el reto. Trae tu diagnóstico escrito: eso es lo que se entrega.

Clase 6 de 32 en la ruta Desarrollo movil

Clase anterior

TypeScript Básico

Siguiente clase

Componentes Core