React 19 de Cero a Experto / Efectos y ciclo de vida

Reto: Mi Bolsillo que no olvida

Reto40 min60 XP

Tu "Mi Bolsillo" ya es interactiva, pero olvida todo al recargar. Hoy le das MEMORIA persistente: los gastos se guardan en localStorage con un custom hook que tú construyes, y sobreviven a recargas. Es el mismo salto de "app que no olvida" que hiciste en JavaScript puro (SC-02, M14), pero ahora la persistencia es una RECETA reutilizable —un hook— en vez de código regado por toda la app. Vas a sentir por qué los custom hooks son el patrón de reutilización de React.

Reto

Mi Bolsillo persistente

Media35 min60 XP(×2 sin mirar la solución)

Qué debes construir

La "Mi Bolsillo" interactiva del módulo 2, pero con persistencia mediante un custom hook:

Un custom hook useLocalStorage<T>(clave, inicial) que devuelva [valor, setValor] (como useState) pero que persista el valor en localStorage con un efecto.
La lista de gastos guardada con ese hook: al recargar el preview, los gastos siguen ahí.
Agregar y borrar gastos (formulario controlado + inmutabilidad), como en el módulo 2.
Total en vivo DERIVADO del array (no un estado, no un efecto).

Reglas

La persistencia vive SOLO en el custom hook —el componente no toca localStorage directamente—.
Todo tipado con TypeScript; el hook es genérico (<T>).
Actualizaciones inmutables ([...], filter); inputs controlados.
El total se deriva en el render, nunca se guarda en estado.

35:00

Cuando estés listo, arranca el reloj.

Las decisiones que este reto fija:

La lógica sucia vive en el hook, no en el componente. Toda la interacción con localStorage —leer, parsear, guardar— queda encapsulada en useLocalStorage. El componente ni se entera de que hay persistencia: usa el hook como si fuera useState. Esa es la reutilización de React: escribes la receta una vez y la aplicas donde sea.
El efecto es legítimo. Sincronizar con localStorage SÍ es tocar un sistema externo → es un uso correcto de useEffect (a diferencia del total, que se deriva).
Lo derivado se calcula. El total sale de gastos en el render. Un solo array como fuente de verdad, todo lo demás derivado o persistido a partir de él.

Autoevaluación: agrega gastos y pulsa el botón de refrescar (↻) del preview —¿siguen ahí? ¿el componente toca localStorage en algún lado, o TODO pasa por useLocalStorage? ¿el total se deriva del array (no es estado)? Compara con el reto "que no olvida" del SC-02: allá la persistencia estaba mezclada con el render manual del DOM; aquí es un hook aislado, reutilizable, que podrías copiar a cualquier otro proyecto. Ese es el poder de empaquetar lógica en custom hooks.

Qué sigue

Módulo 3 conquistado: efectos con cleanup, cuándo NO usarlos, useRef, carga de datos y custom hooks. Ya manejas React "clásico" con soltura. El módulo 4 da el salto a REACT 19: las novedades que cambian cómo se escriben formularios y UIs que responden al instante —Actions, useActionState, useOptimistic, use(), Server Components y el compilador que jubila a useMemo—. El React moderno de verdad.