React Intermedio: Patrones y Optimización

Custom Hooks: abstrayendo lógica compleja Un custom hook permite extraer lógica reutilizable de un componente sin convertir esa lógica en un componente visual. Es una herramienta clave cuando varios componentes necesitan manejar el mismo estado, efectos, sincronización o llamadas a APIs. Cuándo crear un custom hook Cuando dos o más componentes repiten el mismo useEffect, estado o lógica de carga. Cuando querés separar lógica de negocio de la UI. Cuando una interacción tiene estados claros: loadi

Compound Components: composición inteligente El patrón Compound Components permite construir componentes flexibles que trabajan juntos mediante composición. Es útil para tabs, accordions, dropdowns, modales y componentes donde varias piezas comparten estado. La idea principal En lugar de pasar decenas de props a un componente gigante, exponés piezas relacionadas que se combinan de forma declarativa. <Tabs defaultValue="overview"> <Tabs.List> <Tabs.Trigger value="overview">Resum

CONCEPTO CLAVE: El patrón Render Props es una técnica en React para compartir código entre componentes mediante una prop cuya función es renderizar algo. En lugar de heredar comportamiento, los componentes "reciben" la lógica que necesitan renderizar. ¿Qué es el Patrón Render Props? El patrón Render Props es una forma de compartir lógica entre componentes en React. Consiste en crear un componente que acepta una prop (generalmente llamada render o directamente como children) que es una función. E

CONCEPTO CLAVE: Un High Order Component (HOC) es una función que recibe un componente y devuelve un nuevo componente con funcionalidad adicional. No es un componente en sí mismo, sino un patrón que envuelve otros componentes para compartir lógica. ¿Qué problema resuelven los HOC? Imaginemos que tenemos tres componentes que necesitan datos de autenticación. Sin HOC, repetiríamos la lógica de autenticación en cada componente. Con un HOC, envolvemos cada componente y automáticamente obtienen acceso

CONCEPTO CLAVE: Context API es un mecanismo incorporado en React que permite pasar datos a través del árbol de componentes sin necesidad de pasar "props" manualmente en cada nivel. Es la solución nativa de React para el estado global. ¿Qué Problema Resuelve Context API? Imaginemos una aplicación donde tenemos un tema visual (modo claro/oscuro) que debe aplicarse en docenas de componentes dispersos por toda la aplicación. Sin Context, tendríamos que pasar esa prop a través de cada componente inte

useReducer: máquinas de estado para componentes useReducer ayuda cuando el estado de un componente tiene muchas transiciones posibles. En lugar de repartir lógica en varios setState, centralizás cambios en un reducer que recibe estado actual y una acción. Cuándo usar useReducer Cuando el nuevo estado depende del estado anterior. Cuando hay varias acciones: cargar, éxito, error, reset, editar, guardar. Cuando querés que la lógica sea testeable como función pura. Cuando el componente ya tiene dema

Patrón Provider: inyección de dependencias El patrón Provider permite compartir dependencias o estado a través del árbol de componentes sin pasar props manualmente en cada nivel. En React suele implementarse con Context API y hooks de consumo. Qué puede proveer un Provider Cliente de API o repositorio de datos. Usuario autenticado y permisos. Tema visual, idioma o configuración. Funciones compartidas como tracking, feature flags o notificaciones. const AnalyticsContext = createContext(null); exp

Arquitectura de estado: organización escalable La arquitectura de estado define dónde vive cada dato y quién puede modificarlo. En aplicaciones React medianas, muchos problemas aparecen porque todo se vuelve estado global o porque cada pantalla duplica datos. Tipos de estado Estado local: input abierto, modal visible, tab activa. Estado compartido: usuario, tema, filtros que afectan varias secciones. Estado servidor: datos que vienen de APIs y necesitan cache, revalidación o loading. Estado URL:

React.memo y useMemo: evitando renderizados innecesarios La optimización en React no consiste en envolver todo con memoización. Consiste en medir, encontrar renders costosos y aplicar la herramienta correcta cuando hay un beneficio real. Diferencias clave React.memo: evita re-renderizar un componente si sus props no cambiaron. useMemo: memoriza el resultado de un cálculo costoso entre renders. useCallback: memoriza una función para evitar referencias nuevas cuando eso importa. const VisibleItems

Code Splitting: carga progresiva para mejores experiencias Code splitting divide el JavaScript en partes más pequeñas para cargar solo lo necesario al inicio. Esto mejora la experiencia en rutas pesadas, dashboards, editores, gráficos o modales que no siempre se usan. Cuándo conviene Componentes grandes que no aparecen en el primer render. Rutas de administración, dashboards o editores. Librerías pesadas de gráficos, mapas, markdown o video. Modales o paneles que el usuario abre bajo demanda. im

Imagina que estás construyendo una aplicación React compleja con múltiples componentes anidados. De repente, un pequeño componente en lo más profundo de tu árbol de componentes lanza un error inesperado. Sin los conocimientos adecuados, toda tu aplicación podría colapsar, mostrando una pantalla en blanco al usuario. ¿Te suena familiar? Los Error Boundaries son el mecanismo elegante que React nos proporciona para evitar exactamente este escenario. En esta lección, aprenderás cómo implementarlos c

¿Por qué React Testing Library? Cuando escribimos pruebas para nuestros componentes de React, es fácil caer en la trampa de probar la implementación en lugar de probar el comportamiento. ¿Cuántas veces has visto tests que verifican el estado interno de un componente o acceden a métodos privados? Esto crea tests frágiles que se rompen cuando refactorizamos código, aunque la funcionalidad siga funcionando perfectamente. CONCEPTO CLAVE: React Testing Library (RTL) está construida sobre DOM Testing