Historia y versiones

React lleva el tiempo suficiente en el mercado como para haber pasado por varias épocas distintas, y conocer el esquema general de esa historia te ayuda a entender el código que encontrarás en el mundo real. Un tutorial de 2017 y uno de hoy pueden ser ambos "React" y verse completamente diferentes. Este capítulo recorre la línea de tiempo y te explica los dos estilos en los que te toparás.

Una breve cronología

React nació en Facebook, donde surgió de la necesidad de mantener interfaces grandes y cargadas de datos sincronizadas sin enredarse en un laberinto de actualizaciones manuales del DOM. Se lanzó como código abierto en 2013, y la idea central, describir la UI para tus datos actuales y dejar que React maneje las actualizaciones, se ha mantenido constante desde entonces. Casi todo lo demás sobre cómo escribes React ha evolucionado alrededor de ese núcleo.

Durante sus primeros años, un componente que necesitaba recordar algo se escribía como una clase de JavaScript. Las clases son una característica ordinaria de JavaScript, y React las utilizó para darle a un componente un lugar donde guardar datos que cambian con el tiempo, junto con un conjunto de métodos especialmente nombrados que React llamaría en ciertos momentos: cuando el componente aparecía por primera vez en pantalla, cuando se actualizaba y cuando se removía. Este estilo fue el predeterminado durante mucho tiempo, y es por eso que gran parte del código React que ya existe se escribe de esta manera.

El gran cambio llegó con los hooks, que aparecieron en React 16.8 a principios de 2019. Un hook es una función que React te proporciona y que permite que un componente de función plano haga cosas que antes solo una clase podía hacer, como recordar un valor entre renderizados. Escribir un componente se hizo mucho más corto, y los componentes de función se convirtieron rápidamente en lo predeterminado para el código nuevo. Hooks los cubre adecuadamente más adelante. Lo único que necesitas tener en mente por ahora es que los hooks son lo que hizo posible el estilo moderno.

React ha seguido evolucionando desde entonces: React 18 llegó en 2022 y React 19 en 2024, cada uno añadiendo capacidades y suavizando asperezas. Esos lanzamientos importan más una vez que estés construyendo aplicaciones reales, y aparecen más adelante en el manual donde son relevantes.

Ese es el panorama en general. No necesitas memorizar fechas. Lo útil que puedes llevarte es que React tiene una larga historia, los fundamentos se han mantenido firmes, y el estilo de escritura se ha movido decididamente hacia componentes de función y hooks.

Dos estilos de React en el mundo real

Debido a esa historia, te encontrarás con React escrito en dos estilos notablemente diferentes.

El estilo más antiguo escribe un componente como una clase. Sus datos que cambian viven dentro de la clase, y React llama métodos especialmente nombrados en momentos establecidos de la vida del componente. Una gran cantidad de código en producción aún funciona de esta manera, y muchos tutoriales antiguos, publicaciones de blog y respuestas de Stack Overflow están escritos así. Todavía funciona y sigue siendo compatible. Es simplemente la forma anterior de escribir React.

Cómo se ve el estilo más antiguo

Este manual no enseña este estilo y no necesitas escribirlo. Vale la pena poder reconocerlo, porque te lo encontrarás. Una base de código más antigua tiene componentes que se ven más o menos así:

class Counter extends React.Component {
  state = { count: 0 }

  componentDidMount() {
    // React llama esto una vez, justo después de que el componente aparece por primera vez en pantalla
  }

  render() {
    return <button>Se hizo clic {this.state.count} veces</button>
  }
}

Tres cosas lo marcan: class y extends React.Component al principio, this.state como el lugar donde viven sus datos que cambian, y nombres de métodos que comienzan con component que React llama automáticamente en momentos establecidos.

El estilo moderno escribe un componente como una función y usa hooks para darle memoria y para ejecutar código cuando las cosas cambian. Esto es con lo que se escribe el código React nuevo, y es lo que la documentación oficial ahora enseña primero.

Esta pista enseña React moderno: componentes de función y hooks en todas partes. Donde es probable que te encuentres con el equivalente más antiguo basado en clases, ya sea en una base de código en el trabajo o en un tutorial antiguo, lo señalaremos para que los dos se conecten en tu mente y ninguno te sorprenda.

Dos lanzamientos desde hooks merecen ser conocidos por su nombre. React 18, en 2022, trajo renderizado concurrente: React ganó la capacidad de preparar actualizaciones en segundo plano e interrumpir el trabajo para mantener la interfaz responsiva. También cambió cómo comienza una aplicación, moviendo el punto de entrada a createRoot, que es lo que vincula una aplicación a esas capacidades más nuevas.

React 19, en 2024, continuó en esa dirección. Añadió Actions para manejar envíos de formularios y estados pendientes, un hook use para leer recursos como promesas y contexto durante el renderizado, y te permitió pasar ref como una prop ordinaria en lugar de recurrir a forwardRef. Junto con los lanzamientos, el React Compiler automatiza la memoización: el trabajo que los desarrolladores solían hacer manualmente con useMemo y useCallback puede manejarse en tiempo de compilación en su lugar.

Los hooks desplazaron a las clases en lugar de sentarse junto a ellas porque el modelo de clase hacía que la lógica con estado fuera difícil de compartir. Reutilizar comportamiento entre componentes significaba envolverlos en componentes de orden superior o pasarlo a través de render props, ambos cosas que anidaban tu árbol y oscurecían dónde vivía realmente la lógica. Los hooks te permiten extraer esa lógica en una función plana, un hook personalizado, e invocarlo desde cualquier componente. La historia de reutilización se simplificó dramáticamente. Los hooks también evitan this: los componentes de clase te obligan a vincularse a métodos y a razonar sobre qué this se refiere en el momento de la llamada, una fuente recurrente de errores que los componentes de función no tienen.

El trabajo concurrente en React 18 es un cambio más profundo de lo que sugiere el intercambio de createRoot. Alteró cómo se comporta el renderizado en sí, muy por debajo del nivel de la API que llamas. React ahora puede comenzar a renderizar una actualización, pausarla y reanudarla o abandonarla, lo que significa que un renderizado ya no está garantizado que se ejecute de principio a fin de una sola vez. Características como startTransition y la carga de datos impulsada por Suspense se construyen sobre eso. Por eso createRoot importa más allá de ser un nuevo nombre de función: optar por participar es lo que otorga a React permiso para programar e interrumpir el renderizado de esta manera.

De aquí en adelante el manual se construye en el estilo moderno, y Componentes es donde eso comienza en serio: un componente como una función que devuelve una pieza de tu UI. Antes de que se ejecute cualquiera de esto, sin embargo, necesitas tener React instalado y ejecutándose en tu propia máquina.

JunoDos estilos, un React Si encuentras un tutorial donde los componentes se escriben como class con this.state y componentDidMount, no entres en pánico y no pienses que lo estás haciendo mal. Ese es el estilo antiguo de React, y aún funciona. Esta pista usa el estilo más nuevo, componentes de función con hooks, y señalaré los equivalentes más antiguos cuando los pasemos para que nada te sorprenda.

JunoDos estilos, un React Mapa rápido para leer código real: las clases con this.state y métodos del ciclo de vida son el estilo pre-hooks, las funciones con useState y useEffect son React moderno. Verás ambos en el trabajo. Construimos en el estilo moderno aquí, y señalaré el equivalente basado en clases cuando sea la cosa que realmente encontrarás.

JunoDos estilos, un React Los lanzamientos que debes mantener claros: hooks en 16.8 cambió el estilo de autoría predeterminado y solucionó la reutilización de lógica sin HOCs o render props; 18 introdujo renderizado concurrente y movió el punto de entrada a createRoot; 19 añadió Actions, el hook use, y ref como una prop. Los hooks y la concurrencia son los dos cambios que alcanzan la semántica de renderizado, y son los que merecen ser entendidos a nivel de mecanismo.

Siguiente: Configurar un proyecto React, donde tendrás React ejecutándose en tu propia máquina.