Aprender
30 lecciones, en orden, para dejar de adivinar
Cada lección explica un mecanismo y después te lo muestra ejecutándose paso a paso. No hay atajos y no hacen falta: son 326 minutos de lectura bien invertidos.
Tu recorrido
— de 30
Se guarda en este navegador. Sin cuentas, sin servidor, sin rastreo.
Cimientos
Qué es de verdad un componente y dónde vive su estado. Sin esto, todo lo demás es memorizar.
El motor
Las dos fases del trabajo, cómo React decide qué reutilizar y cómo prioriza. Aquí se explica el 80% de lo que te sorprende.
- 0311 min
Render y commit: las dos fases
¿Renderizar es lo mismo que actualizar la pantalla?
beginWorkcompleteWorkcommitRoot
- 0410 min
Reconciliación: cómo React decide qué reutilizar
¿Por qué mi input pierde lo que escribe cuando reordeno una lista?
reconcileChildrenkey
- 0512 min
Lanes: cómo React decide qué hacer primero
Si llegan dos updates a la vez, ¿cuál procesa React primero?
lanesscheduleUpdateOnFiberbaseState
Estado
La cadena de hooks, la cola de updates y cómo diseñar el estado para que no te complique.
- 0612 min
useState por dentro: la cadena de hooks
¿Cómo sabe React cuál de mis useState es cuál?
useStatememoizedState
- 078 min
Las reglas de los hooks son consecuencias
¿Y si llamo un hook dentro de un if? ¿Qué se rompe exactamente?
reglas de los hooks
- 0812 min
La cola de updates y el batching
Llamo a setState tres veces seguidas. ¿Cuántas veces renderiza?
dispatchSetStatebatching
- 0911 min
useReducer: el estado como máquina
¿Cuándo useReducer le gana a useState, y por qué?
useReducerdispatch
- 1012 min
Estructurar el estado para que no te complique
¿Por qué mis bugs de estado siempre aparecen en el mismo lugar?
diseño de estado
- 118 min
useRef: la caja que no avisa
¿Por qué mutar una ref no vuelve a renderizar?
useRef
Efectos
Cuándo corre cada cosa, por qué el orden importa tanto y — sobre todo — cuándo NO usar un efecto.
- 1213 min
useEffect por dentro: cuándo corre y por qué
¿En qué momento exacto corre mi efecto, y cuándo su cleanup?
useEffectareHookInputsEqual
- 138 min
useLayoutEffect y el parpadeo
¿Cuándo vale la pena bloquear la pintura del navegador?
useLayoutEffect
- 1414 min
No necesitas un efecto
¿Cuántos de mis useEffect no deberían existir?
useEffectestado derivado
- 1511 min
Lo reactivo y lo que sólo se lee
Mi efecto se reconecta cada vez que cambia algo que ni siquiera usa. ¿Por qué?
useEffectuseEffectEvent
Contexto y composición
Cómo bajan los datos por el árbol y por qué la composición resuelve casi todo lo que crees que necesita contexto.
Trabajo evitado
Bailout, memo y memoización. Optimizar sin cargar el código de ruido.
Concurrencia
Marcar qué es urgente y qué puede esperar. El diferencial que separa a alguien que usa React de alguien que lo entiende.
- 2012 min
useTransition: marcar lo que puede esperar
¿Cómo hago que la interfaz responda mientras React hace algo pesado?
useTransitionstartTransition
- 2110 min
useDeferredValue: mostrar la versión vieja
¿Cómo muestra React el resultado anterior sin usar un temporizador?
useDeferredValue
- 2213 min
Suspense y use(): componentes que esperan
¿Qué significa que un componente «suspenda»?
Suspenseuse
Límites del árbol
Qué pasa cuando algo se rompe, y por qué el árbol de React no es el árbol del DOM.
- 2311 min
Error Boundaries: cuando algo se rompe
Un componente hondo lanza una excepción. ¿Qué hace React?
Error boundarygetDerivedStateFromError
- 249 min
El árbol de React no es el árbol del DOM
Mi modal se pinta en otro lado del DOM. ¿Por qué el click sigue burbujeando al padre?
createPortal
- 2510 min
Refs, el DOM y el escape de React
¿Cuándo está poblada una ref y quién la limpia?
refuseImperativeHandle
React en el servidor
Server Components, hydration y estado externo. Lo que hoy separa una app moderna de una del 2020.
- 2613 min
Server Components: dónde está el límite
¿Qué separa exactamente un componente de servidor de uno de cliente?
use clientRSC
- 2712 min
Hydration: el HTML que cobra vida
¿Por qué React se queja de que el servidor y el cliente no coinciden?
hydrateRootsuppressHydrationWarning
- 2811 min
useSyncExternalStore y el tearing
¿Por qué no alcanza con un useEffect para leer un store externo?
useSyncExternalStore
React 19 y lo que viene
Acciones, formularios sin cableado y un compilador que memoiza por ti.
- 2912 min
Acciones, formularios y actualizaciones optimistas
¿Cuántos useState hacen falta para un formulario? En React 19, ninguno.
useActionStateuseFormStatususeOptimistic
- 3011 min
El compilador de React y el futuro de memo
Si el compilador memoiza por mí, ¿para qué aprendí todo lo anterior?
React Compiler