React — Avanzado

Dirigido a desarrolladores con experiencia sólida en React que necesitan dar el salto a la construcción de aplicaciones de producción a escala, este curso aborda las decisiones de arquitectura, rendimiento y calidad que separan un proyecto funcional de uno mantenible y robusto. A lo largo de ocho horas, el participante diseñará sistemas de componentes con patrones avanzados, evaluará estrategias de renderizado y gestión de estado en función de requisitos técnicos reales, optimizará el rendimiento con herramientas de profiling, definirá estrategias de carga diferida y abordará los retos de hidratación en entornos SSR, todo ello respaldado por una suite de pruebas de integración que valide los flujos críticos de la aplicación. Al finalizar, el participante será capaz de tomar y justificar decisiones de arquitectura front-end en proyectos de mediana y gran escala, con criterios medibles de rendimiento y cobertura de pruebas.

1. Diseñar sistemas de componentes reutilizables aplicando patrones avanzados como Compound Components, Custom Hooks y Render Props, atendiendo a requisitos explícitos de escala y mantenibilidad.
2. Comparar y seleccionar estrategias de renderizado (CSR, SSR, SSG, ISR) y soluciones de gestión de estado (Redux Toolkit, Zustand, Recoil, Context + reducers) argumentando los trade-offs técnicos asociados a cada opción.
3. Optimizar el rendimiento de una aplicación React mediante el uso de React DevTools Profiler, la reducción de re-renders innecesarios y la implementación de code splitting con carga diferida, alcanzando umbrales de mejora verificables.
4. Anticipar y resolver problemas de hidratación en integraciones SSR con Next.js, garantizando la consistencia entre el estado del servidor y el del cliente en escenarios de datos dinámicos.
5. Construir una suite de pruebas de integración con Testing Library y Vitest/Jest que cubra los flujos críticos de la aplicación sin acoplar los tests a detalles de implementación, incluyendo la auditoría de Custom Hooks complejos con renderHook.

Arquitectura de componentes a escala. Este bloque explora los patrones avanzados de composición —Compound Components, Custom Hooks y Render Props— como herramientas para diseñar bibliotecas de componentes que soporten requisitos de escala. Se analiza cuándo y por qué elegir cada patrón, y se practica su aplicación en un proyecto con restricciones de extensibilidad definidas.

Estrategias de renderizado y gestión de estado. Se revisan en profundidad las cuatro grandes estrategias de renderizado (CSR, SSR, SSG, ISR), evaluando sus implicaciones en rendimiento, SEO e infraestructura. En paralelo, se comparan las principales soluciones de gestión de estado a escala —Redux Toolkit, Zustand, Recoil y el patrón Context + reducers— y se practica la selección y justificación de la opción más adecuada para distintos conjuntos de requisitos técnicos.

Rendimiento y carga diferida. A partir de sesiones prácticas con React DevTools Profiler, se identifican cuellos de botella reales y se aplican técnicas de memoización y control de re-renders. Se aborda también la arquitectura de una estrategia de code splitting con React.lazy y Suspense, definiendo umbrales de tamaño de bundle inicial y verificando su cumplimiento en un proyecto de mediana escala.

SSR con Next.js e hidratación. Este bloque se centra en los problemas típicos de hidratación al combinar renderizado en servidor con estado del cliente: causas de hydration mismatches, patrones para evitarlos y estrategias para sincronizar datos dinámicos entre servidor y cliente de forma predecible.

Pruebas de integración y auditoría de hooks. Se construye una suite de pruebas de integración con Testing Library y Vitest/Jest orientada a flujos de usuario críticos, evitando el acoplamiento a detalles de implementación. El bloque cierra con la auditoría de Custom Hooks complejos mediante renderHook, detectando fugas de memoria y dependencias incorrectas en useEffect.

• Node.js 18 LTS o superior instalado localmente.
• Editor de código con soporte para TypeScript y extensiones de React (se recomienda VS Code con las extensiones ESLint y Prettier).
• Navegador basado en Chromium con React DevTools instaladas.
• Acceso a un repositorio Git para gestionar el proyecto de prácticas del curso.
• Conexión a Internet para la instalación de dependencias y el acceso a la documentación oficial de React y Next.js.

• Dominio de hooks fundamentales de React (useState, useEffect, useContext, useReducer) y ciclo de vida de componentes funcionales.
• Experiencia con gestión de estado básica y consumo de APIs asíncronas en aplicaciones React.
• Familiaridad con el ecosistema de herramientas moderno: bundler (Vite o Webpack), TypeScript y gestor de paquetes npm/yarn.
• Haber completado el curso REA02 o acreditar un nivel equivalente de experiencia práctica con React.