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.

Clase 5 de 31 en la ruta Desarrollo movil

Clase anterior

TypeScript Básico

Siguiente clase

Componentes Core