Desarrollo Móvil●Principiante

Hooks con TypeScript

120 min

6 vistas

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

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

Métodos de Arrays

javascript

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

useToggle Hook

javascript

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

Recursos

3 recursos disponibles

Taller Práctico

TallerIntermedio60 min

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

Ejercicios

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