Desarrollo Frontend · FRO-111

React avanzado: hooks, estado global y rendimiento

useMemo, useReducer, contexto, gestores de estado y perfilado para evitar renderizados innecesarios.

Bajo demanda Avanzado 7 módulos · 35 clases

Formato asíncrono Desarrollo React, TypeScript

DESARROLLO

Lo que aprenderás

Extraer lógica repetida a hooks personalizados con una interfaz clara y probada.
Modelar estado complejo con useReducer y transiciones explícitas en lugar de useState encadenados.
Aplicar contexto sin convertirlo en la causa de renderizados globales innecesarios.
Elegir entre un gestor de estado externo y las herramientas nativas según el caso.
Perfilar con las herramientas de React para localizar componentes que se renderizan de más.
Aplicar memo, useMemo y useCallback donde compensan y retirarlos donde solo añaden ruido.
Tipar props, hooks y reductores con TypeScript para detectar errores antes de ejecutar.

Contenido del curso

7 módulos · 35 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Cómo renderiza React 5 clases

Renderizado, reconciliación y confirmación
Qué provoca exactamente un nuevo renderizado
Herramientas de desarrollo y perfilador
Diagnóstico de una aplicación lenta de partida
Criterios de medición del curso

Módulo 2 · Hooks a fondo 5 clases

Reglas de los hooks y por qué existen
useEffect: dependencias, limpieza y casos que no lo necesitan
useRef para valores que no deben provocar renderizado
useLayoutEffect y medición del DOM
Escribir un hook personalizado reutilizable

Módulo 3 · Estado complejo 5 clases

De useState encadenados a useReducer
Acciones y transiciones explícitas
Estados imposibles y cómo hacerlos irrepresentables con tipos
Combinar reductores por dominio
Pruebas del reductor sin montar componentes

Módulo 4 · Estado compartido 5 clases

Contexto: coste real y patrones de división
Separar contexto de valor y de acciones
Cuándo el contexto no es la respuesta
Gestores de estado externos y su modelo mental
Estado del servidor frente a estado del cliente

Módulo 5 · Rendimiento 5 clases

memo aplicado con criterio
useMemo y useCallback: coste frente a beneficio
Listas largas y virtualización
Dividir el código y cargar componentes bajo demanda
Retirar optimizaciones que ya no aportan

Módulo 6 · TypeScript en React 5 clases

Tipar props, children y eventos
Genéricos en componentes reutilizables
Tipar hooks personalizados y reductores
Inferencia y cuándo escribir el tipo a mano
Errores comunes de tipado en JSX

Módulo 7 · Proyecto de cierre 5 clases

Punto de partida: aplicación con problemas de rendimiento
Perfilado y lista priorizada de causas
Reorganizar el estado por dominio
Aplicar memorización solo donde se mide mejora
Informe final con cifras antes y después

Requisitos

Experiencia construyendo aplicaciones React con componentes, estado y efectos.
TypeScript a nivel de tipos básicos, interfaces y genéricos sencillos.
Haber mantenido una aplicación React más allá de un ejercicio de curso.

Descripción

Una aplicación React que crece empieza a mostrar síntomas conocidos: escribir en un campo ralentiza toda la pantalla, un cambio de tema vuelve a renderizar la aplicación entera y el estado se reparte entre contextos, props y almacenes hasta que nadie sabe de dónde viene un dato. Añadir memorización a ciegas no arregla nada y complica la lectura.

El curso ataca el problema con medición. Primero se perfilan aplicaciones lentas para ver qué se renderiza y por qué; después se aplican las herramientas adecuadas: hooks personalizados para aislar lógica, useReducer para estado con transiciones, contexto dividido por frecuencia de cambio y, cuando corresponde, un gestor externo. Todo el código se tipa con TypeScript y se comprueba el efecto de cada cambio.

El resultado es criterio para decidir dónde vive cada dato y cuándo una optimización compensa su coste de mantenimiento, con datos y no con intuición. Es la base para trabajar en aplicaciones grandes y encaja con los cursos de Next.js, de pruebas frontend y de sistemas de diseño, donde estas decisiones se toman a escala de equipo.

¿Para quién es este curso?

Desarrolladores React que mantienen una aplicación con problemas de rendimiento en producción.
Perfiles técnicos responsables de decidir la estrategia de estado de un producto.
Programadores que migran una base de código React de JavaScript a TypeScript.