Cuando una aplicación tiene cientos de actualizaciones simultáneas y cada parte de la página depende de los mismos datos, mantener todo sincronizado con manipulación manual del DOM se convierte en una pesadilla. Eso fue exactamente lo que le ocurrió a Facebook a principios de 2010, y la solución que encontraron transformó por completo la forma en que se construyen interfaces web.
¿Por qué jQuery dejó de funcionar para Facebook?
El News Feed de Facebook era un caos técnico [0:08]. Publicaciones apareciendo, likes actualizándose en tiempo real, comentarios brotando sin recargar la página. Todo se hacía con jQuery, buscando elementos en el DOM uno por uno y modificándolos a mano [0:21].
Ese enfoque se conoce como programación imperativa [0:59]: le das órdenes al navegador paso a paso. Busca este elemento por su ID, cámbiale el texto. Busca este otro por su clase, agrégale un hijo. Cuando múltiples partes de la página dependen de los mismos datos, mantener todo sincronizado era como hacer malabarismos montando bicicleta [1:06]. Un olvido y tu interfaz mostraba datos inconsistentes.
Jordan Walke, ingeniero de Facebook, propuso algo radicalmente distinto en 2011 con un prototipo llamado FaxJS [1:17]. La idea: en lugar de decirle al navegador qué cambiar, tú describes cómo debería verse la interfaz dado el estado actual, y la biblioteca se encarga del resto. Eso es programación declarativa [1:21].
Es como pedir en un restaurante. La manera antigua era entrar a la cocina y decirle al chef cada paso. La manera de React es decir "quiero una pasta carbonara" y el chef resuelve cómo llegar ahí [1:32]. Ese prototipo se lanzó públicamente en 2013 como React [1:46].
¿Cuáles son los tres pilares de React?
¿Qué son los componentes y cómo funcionan?
React rompe la interfaz en piezas pequeñas y reutilizables [1:52]. Un botón es un componente. Un formulario es un componente. Un encabezado de navegación es un componente. Piezas de LEGO: construyes estructuras complejas combinando piezas simples.
En la práctica, un componente es una función de JavaScript que retorna markup [2:08]. Los nombres siempre empiezan con mayúscula para distinguirlos de etiquetas HTML normales. Puedes anidar componentes: una función MiApp retorna un div que contiene un título H1 y dentro, tu componente MiBoton [2:27]. Esa relación padre-hijo es exactamente cómo se construyen interfaces completas.
¿Cómo fluyen los datos con props?
El segundo pilar son las props, las propiedades que un padre pasa a sus hijos [2:39]. El padre envía datos hacia abajo, y los hijos los reciben pero no pueden modificar directamente los datos del padre. Eso es flujo unidireccional [2:51]. Siempre sabes de dónde viene la información.
¿Qué hace el DOM virtual y la reconciliación?
El DOM virtual es donde React se vuelve realmente ingenioso [2:58]. Manipular el DOM real directamente es costoso porque cada cambio obliga al navegador a recalcular layouts y repintar elementos. React creó una copia ligera del DOM real que vive solo en memoria [3:19].
Cuando algo cambia, React crea un nuevo DOM virtual con el estado actualizado, lo compara con la versión anterior, calcula el conjunto mínimo de cambios necesarios y aplica solo esos cambios al DOM real [3:24]. Si tienes cien elementos en una lista y solo cambia uno, React toca únicamente ese elemento.
El algoritmo que hace esta comparación se llama reconciliación [3:52]. Es la razón por la que React se siente rápido incluso con miles de actualizaciones simultáneas.
¿Cómo funcionan estado, eventos y Hooks en React?
Cuando un usuario hace clic en un botón, respondes declarando una función manejadora dentro de tu componente [4:07]. Detalle importante: pasas la función en sí, no la ejecutas. Es como programar una alarma: tú la configuras, y ella suena en el momento correcto [4:22].
Para que un componente recuerde información entre renderizados, usas el Hook useState [4:34]. Llamas a useState con un valor inicial y obtienes dos cosas: el valor actual del estado y una función para actualizarlo. Cada vez que llamas a esa función de actualización, React vuelve a ejecutar tu componente con el nuevo valor y actualiza la pantalla [4:46].
Si renderizas el mismo componente múltiples veces, cada instancia mantiene su propio estado separado [5:03]. Hacer clic en un botón no afecta el contador de otro.
En 2017, React 16 trajo Fiber [5:17], una reescritura completa del motor interno. Fiber divide el trabajo en fragmentos pequeños que pueden pausarse y reanudarse, priorizando lo urgente sobre lo menos crítico.
En 2019, React 16.8 introdujo los Hooks [5:42], que eliminaron la necesidad de componentes de clase. useState, useEffect, useCallback: todas estas funcionalidades ahora viven en funciones simples de JavaScript. Los Hooks solo se llaman en el nivel superior del componente, nunca dentro de condicionales o bucles [6:01]. React depende del orden de llamada para rastrear el estado entre renderizados.
Los componentes deben ser funciones puras: mismo input, mismo output, siempre [6:17].
¿Cómo impacta React en las métricas de rendimiento web?
React DOM ofrece APIs para CSR y SSR [6:33]. Con CSR, el servidor envía HTML mínimo y JavaScript; React construye la interfaz en el navegador. Con SSR, el servidor genera HTML completo antes de enviarlo; el usuario ve contenido más rápido, y React luego hidrata ese HTML para hacerlo interactivo [6:55].
- LCP (Largest Contentful Paint): generalmente mejora con SSR porque el markup llega completo [7:01].
- INP (Interaction to Next Paint): puede sufrir con CSR si el bundle de JavaScript es pesado [7:10].
- CLS (Cumulative Layout Shift): se reduce con SSR porque la estructura ya viene definida [7:19].
Con herramientas como Next.js, puedes elegir SSR o SSG por página individual, combinando lo mejor de cada tipo de renderizado [8:03]. Y cuando el patrón de elevar estado al padre común ya no escala, entran herramientas como Redux y los contextos de React [7:58].
¿Ya identificaste qué parte de tu proyecto necesitaría interactividad compleja? Ese es tu punto de partida para aplicar React de verdad.
