React Intermedio: Patrones y Optimización

Este curso acompaña la evolución de una aplicación React que comienza con componentes aislados y termina con una arquitectura comprobable, mantenible y razonablemente eficiente. El escenario conductor será un panel local de seguimiento de entregas: muestra pedidos, permite filtrar estados, comparte preferencias y debe seguir siendo usable cuando una sección falla o cuando el navegador carga la pantalla lentamente.

En el primer módulo aprenderás a separar comportamiento de presentación. Los custom hooks concentrarán sincronización y estados de carga; los compound components permitirán construir interfaces declarativas para filtros y paneles; Render Props servirá para compartir lógica visual cuando el consumidor necesite decidir la representación; y los HOC se analizarán como una técnica de envoltura útil en código existente, con atención a sus límites y a la composición de props.

El segundo módulo organiza el estado según su responsabilidad. Context API resolverá datos transversales como preferencias de visualización, sin convertir toda la aplicación en un único almacén global. useReducer expresará transiciones explícitas para operaciones con estados relacionados. El patrón Provider aislará dependencias como un repositorio o un servicio de notificaciones, permitiendo sustituir implementaciones durante las pruebas. Finalmente, un mapa de estado distinguirá valores locales, compartidos, provenientes del servidor y representados en la URL.

El tercer módulo introduce optimización con criterio. Primero se observarán renders y cálculos concretos; después se decidirá si React.memo, useMemo o una estructura diferente resuelve el problema. Code splitting se aplicará a una sección pesada que no aparece en el primer render, con un fallback estable. Los Error Boundaries se colocarán alrededor de zonas independientes para evitar que un fallo de render deje inutilizable todo el panel. Las pruebas con React Testing Library comprobarán acciones visibles del usuario, mensajes y estados de la interfaz, no detalles internos.

El trabajo final será una pequeña pantalla de seguimiento compuesta por una lista filtrable, un panel de preferencias y una sección de métricas cargada bajo demanda. Deberá incluir al menos un hook personalizado, un componente compuesto, un Provider con dependencia sustituible, un reducer para una transición no trivial, una frontera de error y pruebas centradas en la interacción. La optimización no se justificará por cantidad de memoizaciones, sino por una observación concreta antes y después.

Comprobarás el resultado con evidencias reproducibles: una tabla que clasifique cada estado, ejemplos de uso de las APIs, pruebas con resultados esperados, una simulación de error aislado y una comparación del comportamiento de carga. Cada decisión deberá indicar qué problema resuelve y qué complejidad introduce. El objetivo no es aplicar todos los patrones por obligación, sino reconocer cuándo una solución pequeña es suficiente, cuándo una abstracción reduce repetición y cuándo una optimización debe posponerse hasta disponer de una señal observable.

Los fragmentos JSX pertenecen a una aplicación React existente: importa React y los hooks nombrados desde react, coloca las llamadas a hooks en componentes o custom hooks y define los componentes de apoyo indicados en cada taller. Los fragmentos de función pura sí pueden comprobarse separados. Distingue esta preparación de un archivo independiente completo.