React: Patrones, Buenas Prácticas e Internals
No es documentación de React. Es un ingeniero senior sentado al lado tuyo: «Ejecutá esto. ¿Qué creés que va a pasar? Ahora cambiá esta línea. ¿Viste? Acá está por qué React se comporta así». Render vs commit, reconciliación, Fiber, snapshots de estado, closures obsoletas, refs, rendimiento, React asíncrono e internals — con bugs de producción reales y respuestas listas para entrevistas.
Render vs commit, cómo decide React qué cambió, y por qué el estado de un componente sobrevive — o no.
- Paso 1
Render vs Commit
React hace dos cosas separadas, y confundirlas es la causa número uno de modelos mentales equivocados. Renderi...
Comenzar lección - Paso 2
Los componentes deben ser puros
Un componente de React debe comportarse como una función matemática de sus props, estado y contexto: mismas en...
Comenzar lección - Paso 3
Reconciliación
La reconciliación es cómo React decide qué cambió. Compara el árbol que tu render acaba de devolver contra el ...
Comenzar lección - Paso 4
Modelo mental de Fiber
No necesitás el código fuente de React para razonar sobre Fiber. Necesitás una imagen: por cada componente que...
Comenzar lección - Paso 5
Keys e identidad en listas
Cuando React reconcilia una lista, tiene que decidir cuál de los hijos del render anterior corresponde a cuál ...
Comenzar lección - Paso 6
Usar keys para resetear estado
Las keys no son solo para listas. Como la key forma parte de la identidad de un componente, cambiar la key de ...
Comenzar lección - Paso 7
Identidad de componente
La identidad la decide el tipo de elemento que React ve en una posición — y el tipo se compara por referencia....
Comenzar lección - Paso 8
Por qué a veces se resetea el estado
Ya tenés todas las reglas necesarias para explicar los reseteos de estado. Esta lección las convierte en un ún...
Comenzar lección - Paso 9
Renderizado condicional e identidad
El renderizado condicional cambia silenciosamente la forma del array de hijos, y esa forma es lo que React usa...
Comenzar lección - Paso 10
Fragmentos y keys
Los fragmentos permiten que un componente devuelva varios elementos sin agregar un nodo del DOM. Cuando un fra...
Comenzar lección
El estado como snapshot, batching, updates funcionales, inmutabilidad y dónde debe vivir el estado.
- Paso 11
El estado es un snapshot
`useState` no te da un binding vivo a un valor. Te da el valor para *este* render, congelado. Cada función cre...
Comenzar lección - Paso 12
Batching de actualizaciones de estado
React no re-renderiza una vez por cada llamada a `setState`. Junta todas las actualizaciones disparadas en el ...
Comenzar lección - Paso 13
Actualizaciones funcionales de estado
`setState(valor)` dice «ponelo en esto». `setState(prev => siguiente)` dice «aplicá esta transformación a lo q...
Comenzar lección - Paso 14
Nunca mutes el estado
React decide si el estado cambió con `Object.is` — una comparación por referencia para objetos y arrays. Si mu...
Comenzar lección - Paso 15
Actualizaciones inmutables de arrays
La mitad de los métodos de array de JavaScript mutan en el lugar y la otra mitad devuelve un array nuevo. Usar...
Comenzar lección - Paso 16
Actualizaciones inmutables de objetos
Hacer spread de un objeto lo copia un nivel de profundidad. Los objetos anidados se copian por referencia, así...
Comenzar lección - Paso 17
Evitá el estado redundante
Si un valor se puede calcular durante el render a partir de props u otro estado, no debería ser estado. Guarda...
Comenzar lección - Paso 18
Evitá el estado contradictorio
Dos booleanos pueden expresar cuatro combinaciones, pero un request que está cargando y con éxito a la vez no ...
Comenzar lección - Paso 19
Normalización del estado
Cuando la misma entidad aparece en más de un lugar de tu árbol de estado, actualizarla significa encontrar y a...
Comenzar lección - Paso 20
Elevar el estado
Cuando dos componentes tienen que estar de acuerdo sobre algo, el estado pertenece a su padre común más cercan...
Comenzar lección - Paso 21
Colocación del estado
Elevar el estado es un arreglo, no un valor por defecto. Estado elevado más alto de lo necesario hace que cada...
Comenzar lección - Paso 22
Preservar vs resetear estado
El Módulo 1 estableció qué decide la identidad. Esta lección lo convierte en una decisión de diseño: para una ...
Comenzar lección
Cuándo no necesitás un efecto, dependencias, closures obsoletas, cleanup y race conditions asíncronas.
- Paso 23
Puede que no necesites un efecto
`useEffect` sirve para sincronizar con sistemas fuera de React — el DOM, una suscripción, una conexión de red,...
Comenzar lección - Paso 24
Ciclo de vida de un efecto
Un efecto no tiene un «mount» y un «unmount». Tiene un setup y un cleanup, y React puede ejecutar ese par much...
Comenzar lección - Paso 25
Arrays de dependencias
El array de dependencias no es una perilla de configuración para decidir cada cuánto corre un efecto. Es una d...
Comenzar lección - Paso 26
Closures obsoletas
Una closure obsoleta es la regla del snapshot del Módulo 2 encontrándose con un callback de larga vida. Un int...
Comenzar lección - Paso 27
Bucles infinitos de efectos
Un efecto que asigna un estado que además está en su propio array de dependencias crea un bucle: asignar → ren...
Comenzar lección - Paso 28
Dependencias de tipo objeto
React compara las dependencias con `Object.is`. Un literal de objeto creado durante el render es una referenci...
Comenzar lección - Paso 29
Dependencias de tipo función
Las funciones también son objetos. Una función declarada en el cuerpo de un componente es una referencia nueva...
Comenzar lección - Paso 30
Cleanup de efectos
Todo efecto que arranca algo debe poder pararlo: listeners, intervalos, suscripciones, observers, conexiones a...
Comenzar lección - Paso 31
Race conditions al hacer fetch
Los requests no se resuelven en el orden en que los enviaste. Escribí rápido en un buscador y un request lento...
Comenzar lección - Paso 32
AbortController
La bandera de ignorar evita que un resultado viejo se *aplique*. AbortController va más allá y frena el reques...
Comenzar lección - Paso 33
Lógica de evento vs lógica de efecto
Cierto código corre porque el usuario hizo algo. Otro corre porque el componente está en pantalla y debe mante...
Comenzar lección - Paso 34
Strict Mode y la doble ejecución de efectos
En desarrollo, Strict Mode renderiza tu componente dos veces y lo monta, desmonta y vuelve a montar de inmedia...
Comenzar lección
Estado vs ref, acceso al DOM, y por qué reutilizar un custom hook reutiliza lógica — nunca estado.
- Paso 35
Estado vs Ref
Tanto `useState` como `useRef` recuerdan un valor entre renders. Exactamente uno de los dos le avisa a React q...
Comenzar lección - Paso 36
Valores persistentes con useRef
Una ref es el hogar correcto para todo lo que deba sobrevivir a los re-renders pero no tenga nada que hacer en...
Comenzar lección - Paso 37
Referencias al DOM
Pasarle una ref a un elemento del DOM hace que React ponga el nodo real en `ref.current` después del commit. E...
Comenzar lección - Paso 38
Patrón del valor anterior
React te da el valor actual. Cuando necesitás el anterior — para animar una dirección, detectar un cruce o log...
Comenzar lección - Paso 39
Timers con refs
Hacer debounce, throttle y acciones diferidas requiere alcanzar un timer que creó un render anterior. Ese hand...
Comenzar lección - Paso 40
Ref vs variable local
Una variable declarada dentro de un componente parece persistir. No lo hace — se recrea en cada llamada, como ...
Comenzar lección - Paso 41
Handles imperativos
A veces un padre legítimamente necesita darle una orden a un hijo: enfocá este campo, reproducí este video, ll...
Comenzar lección - Paso 42
Custom hooks con estado y refs
Un custom hook es una función cuyo nombre empieza con `use` y que llama a otros hooks. No hay más maquinaria —...
Comenzar lección - Paso 43
Los custom hooks comparten lógica, no estado
Este es el malentendido que más sobrevive incluso en desarrolladores de React sólidos: importar el mismo custo...
Comenzar lección
Qué causa realmente un render, igualdad referencial, memo/useMemo/useCallback — y cuándo no usarlos.
- Paso 44
¿Qué causa realmente un render?
Hay exactamente tres razones por las que React llama a tu función de componente. Saber la lista de memoria con...
Comenzar lección - Paso 45
Renders del padre y renders del hijo
Cuando un padre renderiza, React entra en sus hijos y los renderiza también — por defecto, sin importar si alg...
Comenzar lección - Paso 46
Las props no disparan renders por sí solas
«Un componente renderiza cuando cambian sus props» es la frase equivocada más repetida de React. Esta lección ...
Comenzar lección - Paso 47
Render no significa actualización del DOM
El Módulo 1 lo introdujo. Ahora que estás por empezar a optimizar, importa de verdad: un render que estabas po...
Comenzar lección - Paso 48
Re-renders innecesarios
Un re-render solo importa si es caro o frecuente. Antes de memoizar, casi siempre conviene mover el estado par...
Comenzar lección - Paso 49
React.memo
`React.memo` envuelve un componente para que, cuando renderiza su padre, React primero compare las props nueva...
Comenzar lección - Paso 50
Igualdad referencial
Una sola regla está debajo de las dependencias de efectos, `React.memo`, `useMemo` y `useCallback`: React comp...
Comenzar lección - Paso 51
Qué significa realmente la comparación superficial
La gente dice «React.memo hace una comparación superficial» y «React compara con Object.is» como si fueran la ...
Comenzar lección - Paso 52
useMemo
`useMemo` cachea un valor calculado entre renders y solo lo recalcula cuando cambia una dependencia. Tiene dos...
Comenzar lección - Paso 53
Estabilizar una referencia
Una vez que sabés que una referencia nueva anula memo y vuelve a disparar efectos, la pregunta pasa a ser: ¿có...
Comenzar lección - Paso 54
useCallback
`useCallback(fn, deps)` es `useMemo(() => fn, deps)` con mejor sintaxis. Cachea la identidad de una función, n...
Comenzar lección - Paso 55
Callbacks estables desde custom hooks
Un custom hook que devuelve funciones está publicando una API, y la identidad de esas funciones es parte de el...
Comenzar lección - Paso 56
Cuándo NO memoizar
La memoización no es gratis. Cada `memo` agrega una comparación de props, cada `useMemo`/`useCallback` agrega ...
Comenzar lección - Paso 57
Cuando una referencia nueva es el bug
Hasta ahora una referencia nueva te costaba un render desperdiciado. A veces te cuesta la correctitud — porque...
Comenzar lección - Paso 58
Modelo mental del React Compiler
El React Compiler inserta automáticamente la memoización que habrías escrito a mano. Entender qué puede y qué ...
Comenzar lección - Paso 59
Problemas de re-render con Context
Context resuelve el prop drilling, no el rendimiento. Todo consumidor se re-renderiza cuando cambia el valor d...
Comenzar lección - Paso 60
Dividir el Context
Un contexto por preocupación, y a menudo uno para el valor y otro para los setters. Así los consumidores se su...
Comenzar lección - Paso 61
Rendimiento de listas grandes
Diez mil filas es el caso donde el DOM realmente es el cuello de botella. Ninguna cantidad de memoización ayud...
Comenzar lección - Paso 62
React Profiler
Todo en este módulo se midió con logs de consola. El componente `<Profiler>` lo hace en serio: React reporta c...
Comenzar lección - Paso 63
Identidad y memoización — el mapa completo
Todo en este módulo desciende de un solo hecho de JavaScript: `Object.is` compara primitivos por valor y todo ...
Comenzar lección
Controlado vs no controlado, propagación, comportamientos por defecto y arquitectura de formularios.
- Paso 64
Inputs controlados vs no controlados
Un input controlado renderiza el valor que React tiene en el estado. Un input no controlado guarda su propio v...
Comenzar lección - Paso 65
Pasar vs llamar manejadores de eventos
`onClick={handleClick}` pasa una función. `onClick={handleClick()}` la llama durante el render y pasa el resul...
Comenzar lección - Paso 66
Aridad de callbacks: los argumentos que no pediste
La lección anterior fue sobre pasar una función en vez de llamarla. Esta es sobre lo que pasa *después* de pas...
Comenzar lección - Paso 67
Propagación de eventos
Un clic en un botón dentro de una card dentro de una lista dispara manejadores en los tres, del más interno al...
Comenzar lección - Paso 68
stopPropagation
`e.stopPropagation()` evita que el evento siga hacia los manejadores ancestros. Es el arreglo correcto para el...
Comenzar lección - Paso 69
preventDefault
Algunos elementos tienen comportamiento propio del navegador: los formularios navegan al enviarse, los links n...
Comenzar lección - Paso 70
Arquitectura del estado de un formulario
Un `useState` por campo está bien para dos campos y es inmanejable para doce. Un único objeto, o un reducer, m...
Comenzar lección - Paso 71
Validación derivada
La validación es el caso más puro de estado derivado: los errores son una función de los valores actuales. Gua...
Comenzar lección
Composición, context, lógica headless, componentes compuestos, reducers y máquinas de estado explícitas.
- Paso 72
Composición
El primer instinto cuando un componente necesita variar es agregar una prop. Hacelo cinco veces y tenés un com...
Comenzar lección - Paso 73
children
`children` es una prop común que casualmente tiene sintaxis de JSX. Una vez que lo ves así, se siguen dos cosa...
Comenzar lección - Paso 74
Prop drilling
Pasar una prop a través de cuatro componentes que no la usan es un olor — pero no es automáticamente un proble...
Comenzar lección - Paso 75
Context
Context es inyección de dependencias para un subárbol. Es la herramienta correcta para valores ambientales, y ...
Comenzar lección - Paso 76
Custom hooks
Un buen custom hook extrae un *comportamiento*, no un pedazo de código. La prueba es si su nombre describe alg...
Comenzar lección - Paso 77
Lógica headless
Un componente headless es dueño del comportamiento, el estado y la accesibilidad, y no renderiza nada opinado....
Comenzar lección - Paso 78
Componentes compuestos
Los componentes compuestos son varios componentes que solo tienen sentido juntos y comparten estado implícitam...
Comenzar lección - Paso 79
APIs de componentes controlados
Diseñar un componente reutilizable significa decidir quién es dueño de su estado. Un componente controlado no ...
Comenzar lección - Paso 80
APIs controladas y no controladas
La mayoría de los buenos componentes de librería soportan ambas: pasás `value` y son controlados; pasás `defau...
Comenzar lección - Paso 81
Patrón State Reducer
La inversión de control definitiva: el componente calcula lo que *haría*, y después le entrega el estado propu...
Comenzar lección - Paso 82
useReducer
`useReducer` saca las transiciones de estado de tus manejadores y las mete en una función que responde: dado e...
Comenzar lección - Paso 83
Diseñar máquinas de estado explícitas
Un reducer con un campo `status` ya es una máquina de estados. Hacerlo explícito — listar qué transiciones son...
Comenzar lección - Paso 84
Evitar componentes dios
Un componente de 600 líneas con nueve `useState` y cuatro efectos no es un problema de estilo. Son varios comp...
Comenzar lección - Paso 85
Separar UI de comportamiento
Un componente que hace fetch, transforma, trackea y renderiza es difícil de testear e imposible de reutilizar....
Comenzar lección - Paso 86
Elegir la pertenencia del estado
La lección de cierre del módulo, y la decisión que vas a tomar más seguido: ¿este estado debería ser local, el...
Comenzar lección
Estados async de UI, Suspense, error boundaries, transiciones, UI optimista y las APIs de acciones modernas.
- Paso 87
Estados async de la UI
Toda operación asíncrona tiene al menos cuatro estados — inactivo, cargando, éxito, error — y la mayoría ademá...
Comenzar lección - Paso 88
Race conditions asíncronas
El Módulo 3 arregló races dentro de efectos. Las races también pasan en manejadores de eventos — dos envíos, d...
Comenzar lección - Paso 89
Modelo mental de Suspense
Suspense saca los estados de carga del componente que carga y los sube al árbol. Un componente dice «no estoy ...
Comenzar lección - Paso 90
Error boundaries
Un error no capturado durante el render desmonta toda tu aplicación — React prefiere no mostrar nada antes que...
Comenzar lección - Paso 91
Actualizaciones urgentes vs no urgentes
Escribir debe sentirse instantáneo. La lista cara que reacciona a lo que escribís, no. React concurrente te de...
Comenzar lección - Paso 92
useTransition
`useTransition` te da dos cosas: una forma de marcar actualizaciones como no urgentes, y una bandera `isPendin...
Comenzar lección - Paso 93
useDeferredValue
`useDeferredValue` es la transición a la que recurrís cuando **no** sos dueño de la actualización de estado — ...
Comenzar lección - Paso 94
UI optimista
La UI optimista muestra el resultado de una acción antes de que el servidor lo confirme. Bien hecha hace que u...
Comenzar lección - Paso 95
useOptimistic
`useOptimistic` incorpora la lección anterior a React. Mostrás un valor optimista durante una acción asíncrona...
Comenzar lección - Paso 96
Actions y form actions
React 19 permite que un `<form>` reciba una función como su `action`. React la llama con el FormData, mantiene...
Comenzar lección - Paso 97
useActionState
`useActionState` es el patrón reducer aplicado a acciones asíncronas de formulario: guarda el resultado del úl...
Comenzar lección - Paso 98
Modelo mental de use()
`use()` lee un recurso — una promesa o un contexto — y suspende si no está listo. A diferencia de todos los de...
Comenzar lección
Dieciséis lecciones que empiezan rotas. Reproducí el síntoma, encontrá la causa raíz, aplicá el arreglo.
- Paso 99
Bug: key por índice
Reportado por QA: «Borrar una tarea mueve los tildes a las tareas equivocadas». La función de borrado es corre...
Comenzar lección - Paso 100
Bug: key aleatoria
Reportado por un usuario: «No puedo escribir en el buscador — pierde el foco con cada letra». Un desarrollador...
Comenzar lección - Paso 101
Bug: componente definido dentro de otro
Reportado por una diseñadora: «El formulario del modal se resetea cuando escribo, y la animación de entrada se...
Comenzar lección - Paso 102
Bug: closure obsoleta
Reportado por soporte: «El autoguardado dice que guardó, pero siempre guarda una versión vieja de la nota»....
Comenzar lección - Paso 103
Bug: dependencia faltante en un efecto
Reportado por QA: «Cambiar de sala muestra el nombre de la sala nueva en el encabezado pero sigue entregando m...
Comenzar lección - Paso 104
Bug: bucle infinito de efecto
Reportado por operaciones: «Esta página clava un núcleo de CPU y la pestaña deja de responder a los pocos segu...
Comenzar lección - Paso 105
Bug: mutación de estado
Reportado por QA: «Agregar un ítem al carrito no hace nada — hasta que hacés clic en otra cosa, y ahí aparece»...
Comenzar lección - Paso 106
Bug: race condition en un fetch
Reportado por un usuario: «La página de producto a veces muestra el producto equivocado — el que miré antes»....
Comenzar lección - Paso 107
Bug: resultado asíncrono equivocado
Reportado por un usuario: «Hice clic en Guardar en el tercer borrador, pero guardó el primero»....
Comenzar lección - Paso 108
Bug: falta el cleanup de un efecto
Reportado por operaciones: «El dashboard se pone más lento cuanto más lo usan, y la memoria sube hasta que la ...
Comenzar lección - Paso 109
Bug: tormenta de renders por Context
Reportado por QA: «Escribir en cualquier parte de la app va lento, y el profiler dice que se renderizan doscie...
Comenzar lección - Paso 110
Bug: estado derivado desincronizado
Reportado por QA: «El total del pedido queda mal después de aplicar un descuento, pero solo a veces»....
Comenzar lección - Paso 111
Bug: render caro
Reportado por un usuario: «Escribir en el filtro es inusable — cada letra tarda medio segundo en aparecer»....
Comenzar lección - Paso 112
Bug: exceso de memoización
Reportado en code review: «Todo está envuelto en memo, useMemo y useCallback, pero el profiler dice que esta p...
Comenzar lección - Paso 113
Bug: la ref cambió y la UI no
Reportado por QA: «El contador de mensajes sin leer nunca se actualiza, pero si hago clic en otra cosa salta a...
Comenzar lección - Paso 114
Bug: estado «compartido» de un custom hook
Reportado por un desarrollador: «Extraje el carrito a `useCart()` y lo importé en el header y en la página de ...
Comenzar lección
Elementos, Fibers, los dos árboles, lanes, scheduling, concurrencia, hidratación y la frontera del servidor.
- Paso 115
De JSX a elementos de React
JSX no es parte de JavaScript. Es azúcar sintáctica que un compilador convierte en llamadas de función comunes...
Comenzar lección - Paso 116
Elementos vs componentes vs nodos del DOM
Tres palabras que los principiantes usan indistintamente y que las entrevistas senior esperan que separes con ...
Comenzar lección - Paso 117
Nodos Fiber
Un Fiber es un objeto JavaScript común — uno por instancia de componente en el árbol — que guarda todo lo que ...
Comenzar lección - Paso 118
Hooks y almacenamiento en el Fiber
Los hooks se guardan como una lista enlazada en el Fiber y se emparejan **por orden de llamada**. Ese único de...
Comenzar lección - Paso 119
Árbol actual vs árbol en progreso
React mantiene dos árboles. Uno está en pantalla; el otro se está construyendo. Se intercambian en una sola op...
Comenzar lección - Paso 120
Reconciliación en profundidad
El diff de React es O(n) en vez del O(n³) que costaría un diff de árboles general. Llega ahí haciendo dos supo...
Comenzar lección - Paso 121
Reconciliación de hijos
El algoritmo de listas vale la pena conocerlo con precisión, porque es donde las keys se ganan su existencia y...
Comenzar lección - Paso 122
Keys e identidad de Fiber
Esto cierra el círculo que abrió la lección 5. Ya viste las keys desde afuera como un bug y desde adentro como...
Comenzar lección - Paso 123
Tipo de componente e identidad
El tipo es la otra mitad de la identidad, y se compara por referencia — lo que hace posible romperlo sin quere...
Comenzar lección - Paso 124
Fase de render
La fase de render llama a tus componentes y construye el árbol en progreso. Es asíncrona, interrumpible, y pue...
Comenzar lección - Paso 125
Fase de commit
La fase de commit aplica los cambios marcados al DOM. A diferencia del render, es síncrona y no se puede inter...
Comenzar lección - Paso 126
Procesamiento de efectos
Los efectos no corren donde aparecen en tu código. React los junta durante el commit y los vacía en un orden d...
Comenzar lección - Paso 127
Colas de actualización
Cada hook de estado tiene una lista enlazada circular de actualizaciones pendientes. Durante el render React r...
Comenzar lección - Paso 128
Internals del batching de estado
El batching no es un caso especial para manejadores de eventos. React programa trabajo en una lane y lo vacía ...
Comenzar lección - Paso 129
Scheduling
React no renderiza en el momento en que llamás a setState. Un scheduler decide cuándo corre el trabajo, y le c...
Comenzar lección - Paso 130
Prioridades de actualización
No todas las actualizaciones merecen la misma urgencia. React asigna una prioridad según qué causó la actualiz...
Comenzar lección - Paso 131
Lanes
Las lanes son cómo React representa la prioridad: una máscara de 31 bits donde cada bit es una lane. Reemplazó...
Comenzar lección - Paso 132
Renderizado concurrente
El renderizado concurrente significa que React puede trabajar en más de una versión de la UI a la vez y elegir...
Comenzar lección - Paso 133
Renderizado interrumpible
La cara práctica de la concurrencia: React puede abandonar un render que ya no vale la pena terminar, y empeza...
Comenzar lección - Paso 134
Por qué el render debe ser puro
Ya conociste todas las razones. Esta lección las junta en el único argumento que darías en una entrevista....
Comenzar lección - Paso 135
Por qué React puede descartar un render
React descarta trabajo de render de forma rutinaria, y en más situaciones de las que la mayoría cree....
Comenzar lección - Paso 136
Modelo mental de Strict Mode
Strict Mode es un banco de pruebas solo para desarrollo que simula las cosas que React tiene permitido hacer, ...
Comenzar lección - Paso 137
Hidratación
La hidratación es React adosándose a HTML renderizado en el servidor que ya existe — adoptando el DOM en vez d...
Comenzar lección - Paso 138
Server Components vs Client Components
La última lección, y la frontera más nueva de React: algunos componentes corren solo en el servidor y nunca ll...
Comenzar lección
Portales, a11y, foco, code splitting, HOCs vs hooks, refs, testing, clases, respuestas legacy, seguridad, tearing — más rondas de live coding, code review, trade-offs y diagnóstico, TypeScript, data fetching, formularios, error boundaries, Server Components, diseño de sistemas frontend, el bug que no podés reproducir, dos rondas rápidas, una ronda veloz de encontrar el bug, un juego de predecir el orden de la consola, las features de la plataforma que ya no tenés que construir, las reglas de los hooks rotas a propósito, y doce respuestas que suenan bien y no lo son.
- Paso 139
Portales y adónde van realmente los eventos
Un portal renderiza el DOM de un componente en otro lugar — normalmente `document.body`, para escapar del `ove...
Comenzar lección - Paso 140
Componentes accesibles por defecto
La mayoría de los bugs de accesibilidad en React no son exóticos. Son un `<div onClick>` que debería haber sid...
Comenzar lección - Paso 141
Manejo del foco en diálogos
Abrir un diálogo y dejar el foco atrás es el fallo de accesibilidad más común en apps de React — y un gran uso...
Comenzar lección - Paso 142
Code splitting con lazy + Suspense
`React.lazy` convierte un componente en uno que carga su propio código en el primer render, y `Suspense` muest...
Comenzar lección - Paso 143
HOCs, render props y hooks
Tres generaciones de la misma idea: reutilizar comportamiento sin duplicarlo. Los entrevistadores preguntan po...
Comenzar lección - Paso 144
Componer y combinar refs
Tarde o temprano dos cosas quieren el mismo nodo del DOM: tu código de medición y una ref que pasó el padre. U...
Comenzar lección - Paso 145
useId e identificadores estables
El marcado accesible necesita ids para vincular labels, errores y descripciones con sus inputs. Generar esos i...
Comenzar lección - Paso 146
Testear comportamiento, no implementación
«¿Cómo testeás un componente de React?» en realidad pregunta si sabés qué vale la pena afirmar. La respuesta q...
Comenzar lección - Paso 147
Build de desarrollo vs de producción
«La app va mucho más lenta local que en producción» es una observación real con una explicación aburrida, y co...
Comenzar lección - Paso 148
Leer código React desconocido
La métrica de éxito real del curso: darte código que nunca viste y que predigas qué hará React — antes de ejec...
Comenzar lección - Paso 149
Componentes de clase y sus equivalentes con hooks
Los entrevistadores preguntan por clases por dos razones honestas: las bases de código reales todavía las tien...
Comenzar lección - Paso 150
Respuestas legacy que igual preguntan
Algunas preguntas de entrevista son sobre un React que ya no existe. Responder «eso se quitó en React 17, y es...
Comenzar lección - Paso 151
Seguridad: dangerouslySetInnerHTML, XSS y enlaces
React escapa todo lo que interpolás en JSX, lo que previene por defecto la abrumadora mayoría del XSS. Los ent...
Comenzar lección - Paso 152
useLayoutEffect vs useEffect: cuál elegir
La lección 119 mostró dónde se ubica cada uno en la fase de commit. Esta es la regla de decisión, que es lo qu...
Comenzar lección - Paso 153
Tearing y useSyncExternalStore
Ya usaste `useSyncExternalStore` dos veces en este curso sin que te dijeran por qué existe. Existe porque el r...
Comenzar lección - Paso 154
La ronda rápida
Treinta preguntas que una entrevista senior de React realmente hace, con respuestas lo bastante cortas para de...
Comenzar lección - Paso 155
Entrevista: ¿qué pasa cuando escribís en un input?
Una tecla, rastreada de punta a punta. Es la mejor pregunta de síntesis que puede hacer un entrevistador, porq...
Comenzar lección - Paso 156
Live coding: construí un typeahead
La tarea de live coding en React más común que existe. Parece un componente de veinte líneas y evalúa seis cos...
Comenzar lección - Paso 157
Live coding: escribí un custom hook según especificación
«Escribime un hook que…» es la segunda tarea en vivo más común. Es lo bastante corta para terminarla y lo bast...
Comenzar lección - Paso 158
Entrevista: la ronda de code review
Algunas entrevistas te dan un pull request en vez de un editor en blanco. Es una señal más rápida que el live ...
Comenzar lección - Paso 159
Entrevista: trade-offs de manejo de estado
«¿Usarías Redux acá?» no es una pregunta sobre Redux. Es un chequeo de si clasificás el estado antes de elegir...
Comenzar lección - Paso 160
Entrevista: «la app va lenta» — un método de diagnóstico
Una pregunta abierta de rendimiento evalúa método, no trucos. Un candidato que arranca agregando `memo` ya fal...
Comenzar lección - Paso 161
Entrevista: la ronda de TypeScript
Casi todo puesto de React es hoy un puesto de TypeScript, y las preguntas rara vez son de sintaxis. Son sobre ...
Comenzar lección - Paso 162
Entrevista: la ronda de data fetching
«¿Cómo hacés fetch de datos en React?» es una trampa solo si respondés con una API. El entrevistador está vien...
Comenzar lección - Paso 163
Entrevista: la ronda de formularios
Los formularios son la parte más construida y menos discutida de un trabajo de frontend. Un entrevistador que ...
Comenzar lección - Paso 164
Entrevista: manejo de errores y resiliencia
«¿Qué pasa cuando un componente lanza una excepción?» tiene una respuesta específica y verificable: React desm...
Comenzar lección - Paso 165
Entrevista: la ronda de Server Components
Esta ronda tiene una sola pregunta real disfrazada de varias: **para cualquier fragmento de código, ¿sabés dón...
Comenzar lección - Paso 166
Entrevista: diseño de sistemas frontend — un feed de notificaciones
La ronda senior rara vez es «implementá esto». Es «diseñá esto, en voz alta, y defendé tus decisiones» — y el ...
Comenzar lección - Paso 167
Entrevista: el bug que no podés reproducir
«Un usuario reporta que el botón de enviar le cobra dos veces. No podés reproducirlo. ¿Qué hacés?» Esta pregun...
Comenzar lección - Paso 168
Entrevista: la segunda ronda rápida
Treinta preguntas más de una línea, más difíciles que la primera ronda y sacadas de todo lo que cubrió este cu...
Comenzar lección - Paso 169
Entrevista: la ronda rápida de encontrar el bug 🔍
Diez fragmentos. Cada uno tiene **exactamente un** bug. Vos lo nombrás, y después ves si acertaste....
Comenzar lección - Paso 170
Entrevista: predecí la salida de la consola 🎯
Acá va una pregunta con exactamente una respuesta correcta y cero espacio para divagar: **un padre renderiza u...
Comenzar lección - Paso 171
Entrevista: React vs la plataforma
Una pregunta que los entrevistadores senior adoran, porque atrapa a quien solo aprendió React: **«¿cómo constr...
Comenzar lección - Paso 172
Entrevista: rompé las reglas de los hooks a propósito
Todo el mundo puede recitar las reglas: nada de hooks en condiciones, ni en loops, ni después de un return tem...
Comenzar lección - Paso 173
Entrevista: respuestas que suenan bien y no lo son
Cada una de estas se repite con seguridad en blogs, tutoriales y entrevistas. Cada una está mal, o está mal en...
Comenzar lección - Paso 174
Entrevista: el input controlado que te pelea
Formateá un número de tarjeta mientras el usuario escribe — un espacio cada cuatro dígitos. Diez líneas de cód...
Comenzar lección - Paso 175
Entrevista: la ronda de rendimiento de Context
*«Pusimos el tema, el usuario y el carrito en un solo context. Ahora se re-renderiza todo. ¿Qué pasó?»* — una ...
Comenzar lección
Escribí un useState funcional y un renderizador diminuto desde cero, y después los patrones que necesitan el modelo: recursión, latest-ref, viaje en el tiempo, animación FLIP y scroll infinito.
- Paso 176
Construí tu propio useState
El Módulo 10 te dijo que los hooks son una lista enlazada en el Fiber, emparejada por orden de llamada. Esta l...
Comenzar lección - Paso 177
Construí un React diminuto
Los elementos son objetos planos, renderizar los convierte en DOM, y reconciliar compara viejo y nuevo. Te con...
Comenzar lección - Paso 178
Componentes recursivos
Un componente puede renderizarse a sí mismo. Así se dibujan hilos de comentarios, árboles de archivos, menús a...
Comenzar lección - Paso 179
El patrón de la ref más reciente
Tenés dos malas opciones para un callback dentro de una suscripción de larga vida: dejar que quede obsoleto, o...
Comenzar lección - Paso 180
Deshacer, rehacer y viaje en el tiempo
Deshacer es donde la inmutabilidad deja de ser una regla que seguís y pasa a ser una funcionalidad que entregá...
Comenzar lección - Paso 181
Animaciones FLIP e identidad de listas
Animar el reordenamiento de una lista parece un problema de CSS y en realidad es un problema de identidad. Sol...
Comenzar lección - Paso 182
Scroll infinito con IntersectionObserver
El scroll infinito es la lección donde se encuentran cuatro módulos: un efecto con cleanup real, una race cond...
Comenzar lección