React Intermedio: Dominando Componentes y Patrones Avanzados

Este curso parte de una situación concreta: una aplicación interna para coordinar el préstamo de equipos audiovisuales en una universidad. El catálogo, las reservas, los avisos y los permisos deben crecer sin convertir cada componente en un punto frágil. La meta no es acumular técnicas aisladas, sino decidir dónde vive cada responsabilidad, cómo se comunica y qué ocurre cuando una parte falla.

En el primer módulo trabajarás la composición local. useReducer servirá para modelar reservas con acciones explícitas como agregar, cancelar o confirmar; así podrás comprobar transiciones de estado sin repartir cálculos entre varios setters. Después compararás useCallback y useMemo en una pantalla con filtros, distinguiendo una optimización justificada de una memorización innecesaria. Los compound components te permitirán diseñar una interfaz declarativa para filtros o pestañas, mientras que un custom hook encapsulará una secuencia reutilizable, por ejemplo validar una reserva y exponer su estado de carga. El quiz comprobará si sabes elegir la técnica según el problema, no solo repetir su sintaxis.

El segundo módulo desplaza la atención hacia el estado compartido. Crearás un proveedor de contexto para la sesión del usuario y delimitarás qué componentes necesitan leerla. Luego combinarás reducer y context para administrar reservas desde acciones centralizadas. La separación de concerns te obligará a distinguir datos, lógica de transformación y presentación: una función que calcula disponibilidad no debería depender de elementos visuales. También analizarás cuándo Context resulta suficiente y cuándo una librería dedicada aportaría selectores, herramientas de depuración u otra forma de suscripción. El criterio será el tamaño y la frecuencia de los cambios, no la popularidad de una opción.

El tercer módulo aborda patrones que aparecen al mantener código legado o al diseñar APIs internas. Con render props y children como función observarás cómo un componente puede entregar datos sin imponer la vista. Un HOC servirá para añadir una política transversal, como exigir una sesión, sin mutar el componente recibido. La estructura por características organizará el proyecto alrededor de reservas, catálogo y cuenta, reduciendo dependencias cruzadas. Finalmente, un error boundary aislará el fallo de un panel de disponibilidad, mientras que los errores de eventos y operaciones asíncronas se tratarán en sus propios flujos. El quiz final verificará que distingues alcance, composición y recuperación.

El trabajo final será un panel de reservas con tres áreas: catálogo filtrable, formulario de reserva y resumen de sesión. Deberás justificar qué estado permanece local, cuál se comparte mediante context y qué transiciones se modelan con reducer. Incluirás al menos un componente compuesto, un custom hook, una optimización medida o razonada, una separación clara entre datos, lógica y UI, y un límite de error alrededor del panel más frágil. No se evaluará una apariencia concreta, sino la trazabilidad de las decisiones.

Para comprobar el resultado, prepara datos pequeños y reproducibles: tres equipos, dos usuarios y cuatro reservas con estados distintos. Verifica que cada acción produce el estado esperado, que una reserva cancelada deja disponible el equipo, que un consumidor fuera del proveedor falla de forma controlada y que el error de un panel no oculta el resto de la aplicación. Revisa también que las dependencias de los hooks son completas y que los componentes no reciben props que no utilizan. La entrega debe incluir el árbol de carpetas, una breve tabla de responsabilidades, casos de prueba manuales y una explicación de dos decisiones alternativas que descartaste. Así demostrarás comprensión arquitectónica y capacidad de comprobar el comportamiento.

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.