Curso de Performance Tuning en React para tu equipo de desarrollo

Cómo funciona el proceso de render en React

Detección con React DevTools Profiler

Render de componente padre que afecta a hijos

Re-render sin cambio de props o estado

El efecto del contexto en la propagación de renders

El impacto de las dependencias mal configuradas en hooks

Control de renders con `React.memo`, `useMemo` y `useCallback`

Análisis de renders costosos con Chrome Profiler

Medición con Web Vitals y Timeline

Práctica: eliminación de renders redundantes en 3 componentes críticos

Dividir componentes de forma eficiente

Evitar componentes monolíticos o deeply nested

Separación por responsabilidad y actualizaciones

Identificación de componentes de alto coste

Aislamiento de interacciones costosas

Reutilización de subcomponentes estáticos

Evitar `props drilling` excesivo

Impacto del número de nodos en el Virtual DOM

Uso de `key` en listas para evitar renders erróneos

Práctica: rediseño del árbol de una vista compleja para mayor rendimiento

Reducción del número de hooks por componente

Estado local vs global: cuándo cada uno

Evitar `useEffect` innecesarios o mal configurados

Control de dependencias en `useEffect`, `useMemo`, `useCallback`

`useReducer` para lógica compleja y controlada

`useDeferredValue` y `useTransition` en actualizaciones no urgentes

Evitar ciclos infinitos y renders dobles

Evitar mutaciones directas del estado

Lazy initialization de estados costosos

Práctica: refactor de un componente con múltiples estados no optimizados

Cuándo usar `React.memo` y cuándo no

Comparación entre `useMemo` y `useCallback`

Problemas comunes con referencias estables

Memoización de funciones pesadas

Props referenciales vs primitivas

Creación de `areEqual` personalizados para memo

Uso de memoización en listas grandes o árboles

Análisis de beneficios y costes de memo

`memo` + `useRef` para control de performance

Práctica: aplicación real de memoización en vista tipo dashboard

División de código con `React.lazy()`

Configuración de Suspense y fallback

Carga progresiva de componentes grandes

Precarga con `prefetch`, `preload`, `useEffect`

Optimización del LCP (Largest Contentful Paint)

Lazy load condicional por interacción

Suspense para datos con React Query / SWR

Suspense en SSR con Next.js y streaming

Limitaciones y buenas prácticas

Práctica: implementación de lazy loading en sección pesada de app

Evitar render blocking con CSS no crítico

Inline styles vs CSS-in-JS vs archivos

Uso de `style` dinámico y su impacto

SSR y CSS-in-JS (Emotion, Styled Components, etc.)

Minificación, purgado y tree-shaking de estilos

Font-display, iconos vectoriales y tipografías

Evitar dependencias visuales pesadas

Diseño responsivo sin penalizar carga

Medición del impacto visual con Lighthouse

Práctica: optimización del CSS de un componente crítico

Uso de `react-window` y `react-virtualized`

Paginación vs scroll infinito

Indexación y memoización en listas largas

Estilos por item vs clases compartidas

Optimización del render en tablas grandes

`key` estable y predictable

Evitar renders por scroll y eventos de resize

Composición modular y reutilizable

Benchmarks de listas con miles de elementos

Práctica: conversión de una lista con scroll lento a virtual scroll

Uso de imágenes adaptativas (`srcSet`, `sizes`)

`lazy` loading de imágenes (`loading="lazy"`)

Optimización previa (WebP, AVIF)

Uso de `placeholder`, blur y LQIP

Preload de imágenes críticas

Sprite sheets vs SVG individuales

Reducción del peso de logos, iconos y fondos

Animaciones CSS vs JS

Webpack image optimization y plugins

Práctica: refactor de una sección con media pesada

Reducción de librerías innecesarias

Revisión del `bundle size` con `source-map-explorer`

Evitar componentes con dependencias pesadas

Uso de librerías “ligeras” (date-fns vs moment, etc.)

Tree-shaking efectivo con ESM

Modularización del código (`index.js`, barrel files)

Reemplazo de librerías por código nativo cuando sea viable

Análisis de impacto por cada dependencia

Paquetes dinámicos con importación condicional

Práctica: análisis de bundle y limpieza de dependencias costosas

Uso de Webpack 5 / Vite para producción

Minificación, treeshaking y compresión

Splitting de vendor, runtime y app

Reducción de polyfills innecesarios

GZIP y Brotli compression

Análisis del build con `webpack-bundle-analyzer`

`esbuild` como alternativa ultrarrápida

Importaciones relativas vs absolutas

Control de duplicados y bundles ocultos

Práctica: mejora de tiempo de build y entrega de app real

Integración de Web Vitals manualmente o con `next/script`

Uso de Firebase Performance, Sentry o Vercel Analytics

Medición continua en producción

Métricas de interacción y error por ruta

Tiempos de hidratación y cold start

Configuración de alertas por caída de métricas

Logging de eventos personalizados

Captura de errores críticos en UI

Visualización con Grafana o herramientas propias

Práctica: dashboard de métricas personalizado en una SPA

Diferencias entre CSR, SSR y SSG

Optimización de `getServerSideProps`, `getStaticProps`

React Server Components (experimental en React 19)

Tiempos de render server-side y streaming

Reducción del tamaño del HTML generado

Prefetch de rutas e hidratación progresiva

SSR con caché inteligente (Next.js ISR)

Headless CMS y rendimiento

Pruebas de carga en SSR vs SPA

Práctica: mejorar el TTFB en página con Next.js

Uso de Lighthouse, PageSpeed, WebPageTest

Simulación de red y CPU lentas

Test con múltiples dispositivos y resoluciones

Análisis de rendimiento por país o segmento

Pruebas A/B con variantes de carga

Medición de tiempo hasta interacción completa

Uso de Puppeteer para scripting de tests

Pruebas de usuario + métricas reales

Automatización de pruebas de rendimiento

Práctica: benchmark de 2 versiones de un componente

Auditoría completa inicial con herramientas

Refactor de árbol de componentes y estado global

Lazy loading y chunking de vistas

Aplicación de memoización e isolation

Uso de caché local y persistente

Reducción del build final y mejora del LCP

Análisis de métricas Web Vitals post-optimización

Plan de observabilidad con alertas

Test A/B de mejoras aplicadas

Documentación de resultados y plan de mantenimiento