React

Presentación

React es una biblioteca JavaScript open source destinada a construir interfaces de usuario. Su principio central consiste en dividir una interfaz en componentes independientes y reutilizables, cada uno capaz de gestionar su propia lógica, recibir datos y producir una parte de la visualización.

Un componente React moderno suele ser una función JavaScript que devuelve JSX, una sintaxis que permite describir la interfaz directamente dentro del código. React se encarga después de determinar cómo actualizar la visualización cuando cambian los datos o el estado de la aplicación.

Este enfoque es declarativo: el desarrollador describe la interfaz correspondiente a un estado determinado en lugar de modificar manualmente cada elemento del DOM en cada cambio.

React puede adoptarse progresivamente. Una página existente puede utilizar React únicamente para algunas zonas interactivas, mientras que una aplicación más grande puede confiar toda su interfaz a un árbol de componentes.

La propia biblioteca sigue estando deliberadamente centrada en la interfaz de usuario. No proporciona por sí sola un sistema completo de routing, gestión de datos, autenticación, despliegue o estructura full-stack. Para nuevas aplicaciones, la documentación oficial recomienda generalmente comenzar con un framework React cuando las necesidades superan una simple aplicación cliente.

React también puede funcionar en varios entornos. React DOM proporciona el renderizado Web, mientras que otros renderers permiten utilizar el modelo React en otras plataformas. React Native constituye especialmente el principal ecosistema para construir interfaces móviles nativas con conceptos React.

Desde febrero de 2026, React, React Native, JSX y varios proyectos asociados pertenecen a la React Foundation, una fundación independiente alojada por la Linux Foundation. Ya no pertenecen a Meta, aunque Meta sigue siendo uno de los principales contribuidores y miembros fundadores de la nueva organización.

Durante esta verificación, la versión estable más reciente es React 19.3.0, publicada el 9 de septiembre de 2026.

Funcionalidades

Interfaces construidas con componentes

Una aplicación React se organiza como un árbol de componentes.

Un componente puede representar un simple botón, un formulario, una barra de navegación o una página completa.

Los componentes pueden anidarse unos dentro de otros para construir progresivamente una interfaz compleja a partir de elementos más pequeños.

Generalmente reciben datos desde su componente padre mediante props.

Estas props permiten reutilizar el mismo componente con contenidos o comportamientos diferentes sin duplicar su lógica.

React recomienda actualmente principalmente los componentes funcionales. Los componentes basados en clases siguen siendo compatibles con proyectos antiguos, pero ya no se recomiendan para nuevo código.

JSX para describir la interfaz

React utiliza habitualmente JSX, una extensión de sintaxis JavaScript que permite escribir una estructura similar a HTML directamente dentro del código.

Un componente puede así combinar marcado, expresiones JavaScript, condiciones y datos dinámicos.

JSX no es, sin embargo, HTML convencional.

Las expresiones JavaScript se colocan entre llaves, algunas propiedades utilizan nombres adaptados a JavaScript y el código JSX se transforma antes de la ejecución en llamadas comprensibles por React.

JSX sigue siendo opcional: React también puede utilizarse directamente con funciones como createElement(). En la práctica, sin embargo, JSX constituye la sintaxis dominante en las aplicaciones modernas.

Estado local con useState y useReducer

Los componentes pueden conservar información cambiante mediante su state.

El Hook useState permite crear una variable de estado local y una función encargada de actualizarla.

Cuando cambia un estado, React planifica un nuevo renderizado del componente para que la interfaz refleje los nuevos datos.

Para una lógica más compleja, useReducer permite agrupar las modificaciones de estado dentro de una función llamada reducer.

Este enfoque resulta especialmente útil cuando un mismo estado puede ser modificado por numerosos eventos o cuando varios valores están relacionados entre sí.

React también recomienda evitar estados redundantes: un dato que puede calcularse a partir de props u otro estado generalmente no necesita almacenarse por separado.

Context para compartir datos dentro del árbol

Las props funcionan de forma natural entre padre e hijo, pero cierta información debe estar disponible mucho más profundamente dentro del árbol.

La API Context permite poner un valor a disposición de un conjunto de componentes sin transmitirlo manualmente por cada nivel.

Se utiliza con frecuencia para información global o semiglobal como:

• tema visual;
• idioma;
• usuario conectado;
• configuración;
• servicios compartidos.

Un componente puede leer un valor de contexto con useContext o, en determinados escenarios modernos, con la API use.

Context no sustituye automáticamente a todas las soluciones de gestión de estado. Los estados complejos o muy compartidos pueden necesitar una arquitectura específica o una biblioteca adicional.

Hooks para reutilizar lógica

Los Hooks permiten a los componentes funcionales utilizar diferentes funciones de React.

Entre los principales:

• useState para estado local;
• useReducer para una lógica de estado más estructurada;
• useContext para acceder a un contexto;
• useRef para conservar una referencia o acceder a determinados elementos;
• useEffect para sincronizar un componente con un sistema externo;
• useLayoutEffect para determinadas operaciones relacionadas con el layout;
• useMemo para memorizar un valor calculado;
• useCallback para memorizar una función;
• useTransition para gestionar determinadas actualizaciones no urgentes;
• useDeferredValue para retrasar la actualización de una parte de la interfaz;
• useActionState para gestionar el estado de una Action;
• useOptimistic para mostrar inmediatamente un resultado optimista.

También pueden combinarse varios Hooks dentro de un Custom Hook, lo que permite reutilizar lógica de interfaz sin duplicar código.

Los Hooks siguen, sin embargo, reglas estrictas. Deben llamarse especialmente desde componentes React u otros Hooks y, para la mayoría, en el nivel superior de la función en lugar de dentro de condiciones o bucles.

Eventos y formularios

React permite asociar directamente funciones a los eventos de los elementos de interfaz.

Un botón puede recibir onClick, un campo onChange, un formulario onSubmit y numerosos otros eventos similares a los del DOM.

Los campos de formulario pueden ser controlados, cuando su valor está dirigido por el estado React, o seguir siendo no controlados cuando el navegador conserva directamente su valor.

Desde React 19, los formularios también se benefician del sistema de Actions.

Una función puede transmitirse directamente a la propiedad action de un <form>.

React puede entonces gestionar automáticamente determinados estados de envío e integrar esta operación con las transiciones.

useActionState permite conservar el resultado y el estado pending de una Action.

useFormStatus, proporcionado por React DOM, permite a un componente situado dentro de un formulario conocer su estado de envío.

useOptimistic facilita por su parte las interfaces donde el resultado se muestra inmediatamente antes de la confirmación del servidor.

Suspense y renderizado progresivo

<Suspense> permite mostrar una interfaz alternativa mientras una parte del árbol React todavía no está preparada.

Una aplicación puede, por ejemplo, mostrar un skeleton o un mensaje de carga mientras los datos o el código esperados por un componente pasan a estar disponibles.

Suspense puede funcionar con:

• carga diferida de componentes;
• Server Components;
• frameworks que integran carga de datos;
• determinados recursos compatibles con React.

Suspense no detecta automáticamente cualquier fetch() lanzado dentro de un useEffect. Su funcionamiento depende de mecanismos capaces de suspender realmente el renderizado.

Las boundaries Suspense también pueden coordinarse con Transitions para evitar sustituir bruscamente una interfaz ya visible por un fallback durante una navegación o actualización no urgente.

Transitions y prioridades de renderizado

React permite distinguir actualizaciones urgentes de otras que pueden tratarse con una prioridad menor.

startTransition() y useTransition() sirven para marcar determinadas actualizaciones como no urgentes.

La entrada del usuario debe, por ejemplo, seguir siendo inmediatamente reactiva, mientras que el recálculo de una lista grande puede procesarse en segundo plano.

useDeferredValue() permite conservar temporalmente un valor anterior mientras React prepara una versión actualizada de una parte más costosa de la interfaz.

Estos mecanismos no sustituyen la optimización del código, pero ayudan a React a organizar el trabajo de renderizado para preservar la capacidad de respuesta percibida.

Activity para ocultar una interfaz sin perder su estado

React 19.2 introdujo el componente <Activity>.

Una Activity puede situarse en modo visible o hidden.

Cuando está oculta, React oculta visualmente sus hijos, desactiva sus Effects y puede retrasar sus actualizaciones conservando al mismo tiempo su estado interno.

Cuando la zona vuelve a ser visible, su estado puede así restaurarse.

Este comportamiento puede resultar útil para:

• conservar el estado de una pantalla durante una navegación;
• precargar una interfaz que probablemente se mostrará después;
• mantener una zona temporalmente oculta sin reconstruirla completamente.

Permite distinguir la eliminación total de un componente del simple hecho de volver inactiva una parte de la aplicación.

View Transitions en React 19.3

React 19.3 estabiliza el componente <ViewTransition>.

Permite integrar el renderizado React con la API View Transition del navegador para animar elementos cuando aparecen, desaparecen, se desplazan o cambian de tamaño.

React puede asociar estas animaciones con sus propias Transitions.

El desarrollador puede así crear transiciones animadas entre diferentes contenidos mientras deja que React coordine los cambios de interfaz.

La funcionalidad se apoya en las capacidades del navegador y puede por tanto variar según su nivel de compatibilidad con View Transition API.

Fragment Refs

React 19.3 también estabiliza las Fragment Refs.

Un ref puede asociarse a un <Fragment> para obtener un FragmentInstance que represente colectivamente los elementos DOM de primer nivel contenidos dentro de ese fragmento.

De esta forma resulta posible aplicar determinadas operaciones a un grupo de nodos sin añadir un elemento DOM artificial únicamente para disponer de una referencia.

La API puede servir especialmente para:

• gestión del focus;
• eventos;
• medición de elementos;
• IntersectionObserver;
• ResizeObserver;
• scroll.

Esta función permite añadir determinados comportamientos alrededor de varios componentes manteniendo la estructura HTML existente.

Renderizado cliente e hidratación

Para una aplicación Web renderizada completamente en el navegador, React DOM utiliza principalmente createRoot().

React toma entonces el control de un elemento del DOM y muestra allí el árbol de componentes.

Una aplicación también puede recibir HTML generado previamente en el servidor o durante el build.

En ese caso, hydrateRoot() permite a React reutilizar esta estructura HTML existente y asociarle los eventos necesarios para la interactividad.

Esta hidratación evita destruir y reconstruir inmediatamente todo el contenido ya enviado al navegador.

Renderizado servidor y streaming

React DOM proporciona varias API para generar HTML en el servidor.

Las API modernas pueden enviar progresivamente el documento como stream, especialmente con:

• renderToPipeableStream() para entornos Node.js;
• renderToReadableStream() para entornos basados en Web Streams.

Esta arquitectura puede funcionar con Suspense para enviar determinadas partes de una página en cuanto están preparadas en lugar de esperar a que toda la interfaz esté terminada.

React también proporciona API de prerendering destinadas a producir contenido estático.

En la práctica, un framework suele encargarse de estas operaciones para gestionar routing, datos, build y despliegue alrededor de las API React.

React Server Components

Los React Server Components — RSC permiten ejecutar determinados componentes antes de que lleguen a la aplicación cliente.

Pueden ejecutarse durante el build o en un servidor para cada petición.

Un Server Component puede acceder directamente a una fuente de datos o recursos del servidor y después enviar su resultado al cliente sin transmitir todo su código JavaScript al navegador.

Los componentes que necesitan interacción, estado o API del navegador siguen siendo Client Components.

La directiva "use client" marca una frontera a partir de la cual un módulo debe ejecutarse en el cliente.

Es importante no confundir esta directiva con "use server": "use server" marca Server Functions que pueden llamarse desde el cliente, y no los propios Server Components.

Los Server Components son estables en React 19, pero las API internas que permiten a bundlers o frameworks implementar su infraestructura no siguen necesariamente la misma estabilidad entre todas las versiones menores.

Actions y Server Functions

Las Actions proporcionan a React un modelo integrado para determinadas operaciones asíncronas que modifican datos.

Pueden gestionar estado pending, errores y actualizaciones optimistas.

En una arquitectura que utiliza React Server Components, una Server Function puede definirse con "use server".

El framework transforma entonces esta función para que un componente cliente pueda activarla de forma remota.

La llamada provoca una petición al servidor, que ejecuta la función y devuelve su resultado.

Esta arquitectura permite acercar determinadas mutaciones de datos a la interfaz React, pero depende de un entorno o framework capaz de implementar el protocolo necesario.

React Compiler

React Compiler es una herramienta de compilación destinada a optimizar automáticamente los componentes React.

Analiza el código y puede aplicar optimizaciones de memoización que anteriormente requerían con frecuencia useMemo, useCallback o React.memo.

El objetivo no consiste en hacer inútiles estas API en todos los escenarios, sino en reducir la cantidad de optimización manual necesaria.

React Compiler se considera actualmente estable.

Su adopción sigue siendo opcional y puede hacerse de forma progresiva.

Funciona con JavaScript y puede integrarse con varias herramientas de build, especialmente Babel, Vite, Metro y Rsbuild.

Para funcionar correctamente, el código debe respetar las Rules of React, en particular la pureza de los componentes y el uso correcto de los Hooks.

React 19.3 y la API browser()

El package react-dom de React 19.3 añade la API browser().

Está destinada a componentes que no pueden producir un resultado pertinente en el servidor porque dependen exclusivamente de una API del navegador.

Un componente puede utilizar use(browser()) para suspender su renderizado en el servidor y esperar a su ejecución en el navegador.

La boundary Suspense más cercana puede entonces proporcionar un fallback durante el renderizado servidor.

Este enfoque evita determinados patterns manuales basados en window o en un estado modificado después del primer useEffect.

Trusted Types

React 19.3 añade également une meilleure intégration avec l’API navigateur Trusted Types.

Trusted Types participe à la protection contre certaines attaques XSS liées à l’injection de contenu dans le DOM.

Lorsqu’une politique Content Security Policy exige Trusted Types, React peut désormais transmettre directement des objets comme TrustedHTML, TrustedScript ou TrustedScriptURL aux APIs correspondantes au lieu de les reconvertir systématiquement en chaînes.

Cette fonction concerne surtout les applications appliquant des politiques de sécurité Web avancées.

React Compiler, ESLint et règles de React

Les performances et la fiabilité de React reposent en partie sur plusieurs règles concernant la manière dont les composants et Hooks doivent être écrits.

Les composants sont censés être purs pendant leur rendu : à entrées identiques, ils doivent pouvoir produire un résultat cohérent sans modifier des valeurs externes.

React doit également rester responsable de l’appel des composants et Hooks.

Un composant ne doit donc pas être appelé comme une fonction JavaScript ordinaire lorsqu’il doit être rendu : il doit être utilisé via JSX.

eslint-plugin-react-hooks aide à détecter plusieurs violations des règles de React.

Ces conventions sont devenues encore plus importantes avec React Compiler, qui exploite la structure prévisible du code pour effectuer ses optimisations.

Un écosystème qui repose de plus en plus sur les frameworks

React reste une bibliothèque et non un framework full-stack.

Pour une nouvelle application complète, l’équipe React recommande désormais de commencer avec un framework compatible React dans la majorité des cas.

Ces frameworks peuvent intégrer :

• routage ;
• chargement de données ;
• génération statique ;
• rendu serveur ;
• Server Components ;
• optimisation des assets ;
• gestion du build ;
• déploiement.

Il reste possible de créer une application React à partir d’un outil de build lorsque cette approche est mieux adaptée au projet.

La documentation explique cependant qu’une application qui ajoute progressivement routage, SSR, SSG et Server Components finit souvent par reconstruire une partie des responsabilités d’un framework.

Create React App est déprécié

Create React App — CRA a longtemps constitué la manière officielle la plus simple de démarrer un projet React.

Il est désormais déprécié pour les nouvelles applications.

React recommande de migrer les projets existants vers un framework ou vers une toolchain moderne comme Vite, Parcel ou Rsbuild lorsque cela convient.

CRA continue de fonctionner en mode maintenance pour les projets existants, mais ne représente plus le point de départ recommandé pour un nouveau projet React.

Cas d’usage

Construire une application Web interactive

React convient particulièrement aux interfaces dans lesquelles de nombreuses parties de la page évoluent sans rechargement complet.

Une application peut organiser navigation, formulaires, tableaux de bord, listes, fenêtres modales et composants interactifs dans une même arborescence.

Chaque composant reçoit ses données et React actualise l’interface lorsque l’état évolue.

Un framework peut ensuite ajouter routage, rendu serveur et gestion des données autour de cette couche UI.

Ajouter React progressivement à un site existant

Un projet n’a pas besoin d’être entièrement réécrit en React.

Une page HTML ou une application existante peut créer une ou plusieurs racines React uniquement autour des zones qui nécessitent davantage d’interactivité.

Cette stratégie peut être utilisée pour moderniser progressivement une interface sans imposer immédiatement une migration totale.

React continue ainsi de pouvoir fonctionner aussi bien comme bibliothèque ponctuelle que comme fondation d’une application complète.

Construire une interface réutilisable par composants

Une équipe peut créer une bibliothèque de boutons, formulaires, cartes, menus, tableaux et autres composants puis les réutiliser dans plusieurs écrans.

Les props permettent de modifier leur contenu et leur comportement sans recopier leur structure.

Context, Custom Hooks et composants composables peuvent ensuite mutualiser davantage de logique.

Cette organisation est particulièrement adaptée aux design systems et aux applications comprenant de nombreuses interfaces cohérentes.

Créer une application rendue côté serveur

Une application peut produire son HTML sur un serveur ou pendant le build afin d’envoyer du contenu immédiatement visible au navigateur.

React hydrate ensuite le document pour le rendre interactif.

Suspense et le streaming permettent également de livrer progressivement différentes zones.

Dans les projets modernes, ces mécanismes sont généralement gérés par un framework plutôt que directement avec les API bas niveau de react-dom/server.

Combiner Server Components et interface interactive

Une application peut exécuter sur le serveur les composants chargés de récupérer certaines données puis n’envoyer au navigateur que les parties qui doivent réellement être interactives.

Les Client Components gèrent ensuite événements, état et APIs navigateur.

Cette séparation peut réduire la quantité de JavaScript transmise au client et rapprocher certaines opérations de la source de données.

Elle demande cependant une infrastructure compatible avec React Server Components.

Développer des interfaces natives avec l’écosystème React

Les concepts React peuvent également être utilisés pour créer des interfaces mobiles avec React Native.

Les composants ne produisent alors pas du HTML mais des éléments correspondant à la plateforme native.

Hooks, état, props et logique de composition restent largement familiers.

React Native demeure toutefois un projet et un renderer distincts de React DOM : une application Web React n’est pas automatiquement une application Android ou iOS.

Conclusion

React reste l’une des bibliothèques majeures pour construire des interfaces utilisateur modernes avec JavaScript.

Son modèle fondé sur les composants permet de découper des interfaces complexes en unités réutilisables et d’associer directement logique, données et rendu au sein d’une même structure.

Les Hooks ont progressivement remplacé les classes comme modèle principal du développement React moderne. useState, Context, reducers, Effects et Custom Hooks couvrent une grande partie des besoins quotidiens sans imposer une architecture unique à l’application.

React s’est cependant largement étendu au-delà du simple rendu client. Suspense, streaming, Server Components, Server Functions, Actions et les API de rendu serveur constituent désormais une partie importante de son architecture.

React 19.3 poursuit cette évolution avec la stabilisation de View Transitions et des Fragment Refs, ainsi que l’arrivée de browser() et du support de Trusted Types.

En parallèle, React Compiler change progressivement la manière d’aborder l’optimisation. Une partie de la mémorisation auparavant écrite manuellement peut désormais être déterminée automatiquement pendant le build.

Cette richesse augmente aussi la complexité de l’écosystème. Une application React moderne ne se résume plus forcément à installer react et react-dom. Le choix du framework, du mode de rendu, de la stratégie de données et de la frontière entre serveur et client peut avoir un impact important sur l’architecture.

React reste volontairement une bibliothèque UI plutôt qu’une solution monolithique. Cette flexibilité constitue à la fois sa force et sa principale limite : les besoins périphériques doivent être fournis par un framework ou assemblés à partir d’autres outils.

La disparition de Create React App comme recommandation officielle illustre cette évolution. Pour une nouvelle application, la documentation React oriente désormais principalement vers des frameworks capables d’intégrer les fonctions modernes de la plateforme.

Enfin, la création de la React Foundation en 2026 marque un changement important dans la gouvernance du projet. React est désormais porté par une fondation indépendante hébergée par la Linux Foundation, avec plusieurs entreprises participant à son financement et à sa gouvernance.

Pour construire des interfaces Web composables, des applications interactives, des expériences rendues côté serveur ou des architectures combinant client et serveur, React reste une référence majeure de l’écosystème JavaScript.

Puntos de atención

• La versión estable actual verificada es React 19.3.0, publicada el 9 de septiembre de 2026.

• React es gratuito y open source bajo licencia MIT.

• React, React Native y JSX pertenecen desde febrero de 2026 a la React Foundation, una fundación independiente alojada por la Linux Foundation.

• React es una biblioteca de interfaz y no un framework full-stack completo. Routing, datos, build y despliegue dependen generalmente de otras herramientas o de un framework.

• La documentación oficial recomienda actualmente un framework para la mayoría de las nuevas aplicaciones React completas.

• Create React App está deprecado para nuevos proyectos. Las aplicaciones existentes pueden seguir utilizándolo en modo mantenimiento, pero ya no es la solución recomendada para empezar.

• Los componentes funcionales son actualmente los recomendados. Los componentes de clase siguen siendo compatibles, pero no se priorizan para nuevo código.

• Los Hooks deben respetar las Rules of Hooks. La mayoría no deben llamarse dentro de condiciones, bucles o funciones JavaScript ordinarias.

• Los Effects sirven principalmente para sincronizar React con un sistema externo y no deberían utilizarse sistemáticamente para calcular datos que pueden producirse directamente durante el renderizado.

• React DOM está destinado a la Web. Para Android o iOS nativos, React se utiliza mediante React Native u otro renderer adaptado.

• Server Components y Server Functions requieren integración por parte del framework o bundler. Por sí solos no convierten una aplicación React clásica en una aplicación full-stack.

• Los Server Components son estables en React 19, pero algunas API utilizadas para integrarlos a nivel de framework o bundler pueden seguir evolucionando entre versiones menores.

• "use client" marca una frontera cliente, mientras que "use server" identifica Server Functions. No existe una directiva "use server" utilizada para identificar un Server Component.

• Suspense no funciona automáticamente con cualquier petición lanzada dentro de un Effect. La carga debe utilizar una integración capaz de suspender el renderizado.

• React Compiler es estable pero sigue siendo opcional. Su eficacia depende especialmente del respeto de las Rules of React.

• React 19.3 estabiliza View Transitions y Fragment Refs, dos funciones anteriormente experimentales.

• browser() permite suspender en el servidor un componente que requiere únicamente API del navegador, pero su uso presupone una arquitectura con renderizado servidor y Suspense.

• Trusted Types no sustituye el saneamiento de datos ni una política de seguridad global. Es un mecanismo adicional para determinados usos DOM sensibles.

• El renderizado servidor utiliza hydrateRoot() en el cliente para reutilizar el HTML existente. createRoot() está destinado al renderizado cliente convencional.

• React no impone una única biblioteca de gestión de estado. useState, useReducer y Context son suficientes para muchos proyectos, pero algunas aplicaciones utilizan soluciones externas más especializadas.