React Pro: patrones y rendimiento
Hooks avanzados, context, composición y los patrones que aparecen en código real.
12 aulas · 6 horas de práctica · en el navegador, sin instalar nada
Temario
- useReducer: un solo movimiento, varios cambios — Cuándo varios `useState` empiezan a estorbarse, y cómo un reducer con `type` y `payload` ordena esos cambios.
- useMemo y useCallback: cuándo importan de verdad — El problema real que resuelven —evitar recalcular y evitar redibujar de más— y cuándo son puro ruido.
- Hooks personalizados: empaquetar lógica — Sacar un `useState` + `useEffect` que se repite a una función propia, respetando las reglas de los hooks.
- Context avanzado: cuándo, y el precio de uno solo grande — Cuándo Context es la herramienta correcta frente al prop drilling, y por qué un Context gigante redibuja de más.
- HOC y render props: los patrones que los hooks jubilaron — Cómo se ve un componente de orden superior, por qué los hooks resolvieron el mismo problema con menos ceremonia, y dónde siguen apareciendo.
- Taller — Tabs con Context adentro — Un compound component realista: `<Tabs>` con Context interno y un hook personalizado, en dos capas.
- Manejar errores: los que se ven en el render, y los que no — Error Boundaries de verdad —siguen siendo clases— y por qué NO atrapan un error que llega por una promesa.
- Formularios avanzados: validar al enviar, no en cada tecla — Estado controlado con varios campos, cuándo validar, y cómo mostrar el error de cada campo sin mezclarlos.
- Performance: por qué se redibuja un componente — React.memo, y el criterio para identificar un re-render innecesario sin necesitar un profiler.
- Composición: children como prop de layout — Componer con `children` y props-JSX en vez de configurar con banderas, y cuándo eso alcanza sin necesitar Context.
- Qué testear, y lo que atamos en esta carrera — Comportamiento visible contra implementación, cómo se ve React Testing Library, y un repaso que ata reducer, Context y patrones.
- Taller — El carrito que confirma su compra — Una mini-app que ata reducer, Context, memo y manejo de errores async, en tres capas.