Las Bibliotecas Detrás de las Aplicaciones React Modernas

Una aplicación React moderna se compone principalmente de React más un conjunto pequeño y predecible de bibliotecas: una para la obtención de datos del servidor, una para el estado del cliente, una para el enrutamiento, una para los estilos, una para los componentes primitivos de UI y una para los formularios. React en sí mismo — actualmente en la línea 19.2 — se encarga de los componentes, hooks y el renderizado. Todo lo demás es una decisión, y la rotación constante del ecosistema hace que esas elecciones parezcan más difíciles de lo que realmente son. La realidad es que para cada tarea existe ahora una opción predeterminada clara y una o dos alternativas según el contexto.

Este artículo mapea ese stack por trabajo a realizar: fundación, estado, obtención de datos, enrutamiento, estilos, UI, formularios y animación. Para cada categoría encontrarás la opción predeterminada para 2026, cuándo recurrir a una alternativa y cómo esa elección interactúa con dos fuerzas que están transformando el ecosistema: los React Server Components (RSC) y el React Compiler.

Fundamentos de un Proyecto React: Elegir tu Framework

Antes de cualquier elección de biblioteca, debes seleccionar la base sobre la que se construirá tu aplicación — y en 2026 esa decisión está determinada en gran medida por si deseas utilizar React Server Components. El trabajo a realizar aquí es el scaffolding del proyecto, las herramientas de compilación, el enrutamiento y la estrategia de renderizado, todo agrupado en un único punto de partida.

Para la mayoría de las nuevas aplicaciones, Next.js es la opción predeterminada: es el framework React full-stack más completo, con RSC estable, server actions y enrutamiento basado en archivos. Elige Vite cuando estés construyendo una single-page app renderizada en el cliente y quieras una compilación rápida y sin opiniones impuestas, sin un framework completo — tú mismo ensamblas el enrutamiento y la obtención de datos. Elige Astro cuando el proyecto esté orientado al contenido — páginas de marketing, documentación, blogs — y quieras generar principalmente HTML estático con islas de React solo donde se necesite interactividad. Elige TanStack Start cuando el enrutamiento con seguridad de tipos y las server functions sean la prioridad y puedas adoptar una versión temprana: se encuentra en Release Candidate v1, próximo a ser estable, con soporte para RSC aún en desarrollo.

Las dos fuerzas que vale la pena considerar en todas estas opciones son los React Server Components, que trasladan la obtención de datos al servidor, y el React Compiler, que memoriza automáticamente tus componentes independientemente de la base que elijas.

Qué Cambia el React Compiler en tus Decisiones de Bibliotecas

El React Compiler ya es estable y cambia qué optimizaciones escribes manualmente. React Compiler 1.0 se lanzó el 7 de octubre de 2025, anunciado en React Conf, y memoriza automáticamente los componentes y los valores de los hooks en tiempo de compilación, eliminando la mayoría de las llamadas manuales a useMemo y useCallback. Para la selección de bibliotecas, esto importa porque una clase de código repetitivo que antes saturaba el código de integración — envolver selectores, memorizar callbacks pasados a campos de formulario, estabilizar valores derivados — ahora es gestionada por el compilador.

El efecto práctico en la elección de bibliotecas: esa memorización automática reduce el argumento de rendimiento para las bibliotecas de estado atómico y elimina una categoría de código repetitivo en las integraciones de formularios, de modo que eliges las bibliotecas por su modelo de datos y ergonomía, no por cuánto ajuste manual requieren para evitar cascadas de re-renderizados. El compilador es compatible con Vite, Next.js y Expo según la documentación de instalación de React Compiler.

Bibliotecas de Gestión de Estado en React: La Taxonomía de Cuatro Categorías

Las aplicaciones React modernas tienen cuatro categorías de estado diferenciadas — estado del servidor gestionado por TanStack Query, estado de UI del cliente manejado por useState o Zustand, estado de URL controlado por nuqs, y estado global de la aplicación en Zustand — y elegir la herramienta incorrecta para cada categoría es la fuente más común de complejidad innecesaria. La mayor parte del dolor de “la gestión de estado es difícil” proviene de colocar datos del servidor en un store del cliente, o de modelar estado de UI compartido que pertenece a la URL como estado global.

Entre TanStack Query para el estado del servidor, los hooks integrados para el estado local y la URL para el estado de UI compartido, la superficie que necesita un store global dedicado se ha reducido considerablemente. Cuando sí lo necesitas, Zustand es la opción predeterminada — un store mínimo con create(), suscripciones por selector y sin provider:

import { create } from 'zustand'

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}))

Elige Redux Toolkit cuando estés manteniendo o extendiendo una base de código Redux existente y quieras sus DevTools con viaje en el tiempo y el seguimiento estructurado de acciones. Elige Jotai cuando genuinamente necesites suscripciones atómicas de grano fino — aunque con el React Compiler memorizando automáticamente, el argumento de re-renderizados a favor del modelo atómico es más débil que antes. Para el estado de URL específicamente, nuqs te proporciona parámetros de búsqueda tipados para que los filtros y la paginación sobrevivan al refresco y se compartan limpiamente mediante enlaces.

Estado del servidor y el valor predeterminado de staleTime

El staleTime de TanStack Query tiene un valor predeterminado de 0, lo que significa que cada montaje de componente marca los datos como obsoletos y desencadena una recarga en segundo plano; para datos estables como menús de navegación o perfiles de usuario, establecer staleTime con un valor distinto de cero es el único cambio de configuración de mayor impacto que la mayoría de las aplicaciones nunca realiza. La documentación de valores predeterminados importantes lo explica claramente:

import { useQuery } from '@tanstack/react-query'

// staleTime defaults to 0 → refetches on every mount.
// Set a non-zero value for data that doesn't change per-view.
const { data } = useQuery({
  queryKey: ['profile'],
  queryFn: fetchProfile,
  staleTime: 5 * 60 * 1000, // 5 minutes
})

Un patrón de fallo común en producción es dejar este valor predeterminado tal cual: las reproducciones de sesión de aplicaciones con muchos datos frecuentemente revelan cascadas de recargas en segundo plano disparándose en cada cambio de ruta — un patrón difícil de atribuir a una sola línea de configuración hasta que observas la secuencia de red reproducida contra una sesión de usuario real.

Bibliotecas de Obtención de Datos y Enrutamiento en React

Para la obtención de datos, la opción predeterminada depende de dónde se realiza la obtención. Para la obtención en el lado del cliente — caché de REST o GraphQL, actualizaciones optimistas, sincronización en segundo plano — TanStack Query es la opción predeterminada; en un framework RSC como Next.js 16, la obtención de datos se realiza en el servidor dentro de los Server Components y los datos se pasan hacia abajo como props, evitando por completo una biblioteca de obtención de datos en el cliente. Elige Apollo Client cuando tu enfoque sea GraphQL-first y quieras caché normalizado; elige tRPC cuando controles tanto el cliente como el servidor en TypeScript y quieras inferencia de tipos de extremo a extremo sin una capa de esquema.

El enrutamiento sigue la misma división servidor/cliente. Si usas un meta-framework, este se encarga del enrutamiento. Fuera de uno, React Router es la biblioteca más utilizada; incluye tanto un modo de biblioteca clásica del lado del cliente como un modo de framework completo con loaders, actions y renderizado en el servidor. Elige TanStack Router cuando la inferencia de rutas con seguridad de tipos sea una prioridad — es estable en v1 con la mejor inferencia TypeScript de su clase para parámetros y búsqueda.

TanStack Start — que ofrece enrutamiento basado en archivos con seguridad de tipos, server functions y SSR — se acerca a ser estable como Release Candidate v1; según la documentación de TanStack Start, el soporte para RSC aún está en desarrollo, lo que hace de Next.js 16 la opción full-stack más completa para equipos que necesitan RSC hoy. Obsérvalo como el recién llegado a seguir, más que como la opción predeterminada actual.

Bibliotecas de Estilos en React y Compatibilidad con RSC

La compatibilidad con RSC es ahora un filtro de primera clase para las decisiones de estilos. Las bibliotecas de CSS-in-JS en tiempo de ejecución como styled-components y Emotion ejecutan la inyección de estilos en el navegador, lo que entra en conflicto con el modelo de React Server Components de renderizado en el servidor — por lo que en una aplicación Next.js 16 que usa RSC, Tailwind CSS v4 o CSS Modules son las opciones compatibles por defecto, no el CSS-in-JS en tiempo de ejecución.

Tailwind CSS es la opción predeterminada de utilidades. La línea v4 trasladó la configuración a CSS mediante la directiva @theme y ofrece un motor más rápido, según el anuncio de Tailwind v4. Un único className gestiona los estilos:

<h1 className="text-blue-700">{title}</h1>

Elige CSS Modules cuando quieras CSS colocado junto al componente y con alcance limitado, sin necesidad de aprender un vocabulario de clases de utilidad — no producen filtraciones y funcionan limpiamente en RSC. Elige una opción de CSS-in-JS en tiempo de compilación como vanilla-extract cuando quieras estilos con seguridad de tipos escritos en TypeScript sin coste en tiempo de ejecución.

styled-components está en modo de mantenimiento desde marzo de 2025 y no se recomienda para nuevos proyectos, aunque no es software abandonado — sigue funcionando en RSC detrás de un límite 'use client' y añadió tematización con variables CSS compatible con RSC mediante createTheme en su versión v6.4.

El punto más amplio se mantiene: la inyección de estilos en tiempo de ejecución entra en conflicto con el modelo de renderizado en el servidor, por lo que los enfoques de utilidades o en tiempo de compilación son la opción más segura en nuevas aplicaciones RSC.

Bibliotecas de UI en React: Modelo de Dependencia vs. Modelo de Propiedad

La decisión más importante en la capa de UI es arquitectónica: instalar una biblioteca de componentes versionada, o ser propietario del código de los componentes directamente. Las bibliotecas de componentes con estilos — MUI, Mantine, Chakra UI, Ant Design — te proporcionan un sistema de diseño pulido y personalizable como una dependencia que actualizas con el tiempo. El modelo de propiedad, popularizado por shadcn/ui, copia el código fuente de los componentes directamente en tu proyecto.

El modelo de copiar y pegar de shadcn/ui significa que eres propietario del código de los componentes por completo — no hay dependencia versionada que actualizar, ni migración por cambios incompatibles, ni decisiones de diseño del autor de la biblioteca que no puedas modificar — lo que es arquitectónicamente diferente a instalar MUI o Mantine y explica por qué se ha convertido en la opción predeterminada para equipos que construyen sistemas de diseño personalizados sobre Tailwind. Ha superado las 110k estrellas en GitHub.

// Modelo de propiedad: Button vive en tu repositorio, lo editas directamente.
import { Button } from '@/components/ui/button'

// Modelo de dependencia: Button proviene de un paquete versionado.
import { Button } from '@mui/material'

shadcn/ui construye sus componentes sobre primitivos headless, y el primitivo predeterminado es Radix. Según la documentación de shadcn/ui, Base UI fue añadido como primitivo alternativo oficial a principios de 2026, pero Radix sigue siendo el predeterminado recomendado.

Radix ha sido mantenido por WorkOS desde su adquisición de Modulz en 2022, y algunos desarrolladores perciben que su cadencia de lanzamientos ha disminuido — contexto que explica por qué Base UI (del equipo de MUI) apareció como alternativa — aunque shadcn/ui sigue utilizando Radix por defecto, que se mantiene activamente y es de código abierto bajo licencia MIT. Elige Base UI cuando quieras primitivos del linaje MUI/Floating UI y flexibilidad en el motor de estilos; elige una biblioteca con estilos completos como Ant Design cuando estés construyendo interfaces empresariales con muchos datos y quieras tablas, formularios y selectores de fecha incluidos de serie, en lugar de ensamblarlos tú mismo.

Bibliotecas de Formularios en React

React Hook Form es la opción predeterminada para formularios en React moderno. Su diseño es no controlado: los campos se registran mediante refs en lugar de mantener cada pulsación de tecla en el estado de React, lo que minimiza los re-renderizados por construcción. Con la validación gestionada mediante resolvers de esquema, la combinación típica es React Hook Form junto con Zod para la validación en tiempo de ejecución y los tipos inferidos.

import { useForm } from 'react-hook-form'

const { register, handleSubmit } = useForm()

Según la documentación de React Hook Form, register conecta un campo al formulario sin hacerlo controlado. Con el React Compiler memorizando automáticamente, la memorización manual de callbacks que el código de integración antes requería alrededor de los manejadores de campos queda eliminada, simplificando aún más la conexión. Elige TanStack Form cuando quieras un manejo completamente tipado de estado de formulario complejo y profundamente anidado; elige Conform cuando estés construyendo formularios con mejora progresiva alrededor de server actions. Formik y React Final Form están prácticamente sin mantenimiento — evítalos en nuevos proyectos.

Un patrón de fallo común en producción con formularios es el exceso de re-renderizados provocado por inputs controlados que actualizan el estado en cada pulsación de tecla. El modelo no controlado produce menos eventos de estado intermedios, lo que se refleja en la reproducción de sesiones como trazas de interacción más limpias — menos renderizados redundantes entre que el usuario escribe y el formulario se envía.

Bibliotecas de Animación en React

Motion es la opción de animación de facto para React. Motion — la biblioteca anteriormente conocida como Framer Motion — utiliza el nombre de paquete motion y la ruta de importación motion/react, alcanzó su versión principal v12 con soporte completo para React 19, y acumula aproximadamente 30 millones de descargas mensuales en npm.

La API declarativa cubre la mayoría de las necesidades de las aplicaciones con las props initial y animate:

import { motion } from 'motion/react'

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

Según la documentación de Motion, cubre gestos, transiciones de layout y AnimatePresence para animaciones de salida. Una nota sobre accesibilidad: respeta la media query prefers-reduced-motion, que MDN documenta como la señal estándar de que un usuario desea minimizar el movimiento — Motion te permite leerla y condicionar las animaciones en consecuencia. Elige react-spring cuando quieras la animación de resorte basada en física como modelo central; elige GSAP cuando necesites una orquestación de línea de tiempo de grano fino a través de muchos elementos.

El Elenco de Apoyo: Autenticación, Testing, Gráficos e i18n

Más allá del stack principal, algunas categorías completan la mayoría de las aplicaciones — una opción sensata por defecto en cada una:

• Autenticación: Auth.js
• Testing: Vitest para pruebas unitarias, Playwright para pruebas de extremo a extremo
• Gráficos: Recharts
• Internacionalización: i18next

Cada una es un tema extenso por sí misma; tómalas como puntos de partida y consulta la documentación correspondiente a partir de ahí.

El Stack React 2026 de un Vistazo

Para una aplicación Next.js 16 hoy en día, las opciones predeterminadas compatibles se alinean por trabajo a realizar:

Conclusión

La rotación del ecosistema es real, pero el espacio de decisión es pequeño: elige la categoría correcta para tu estado, obtén los datos en el servidor cuando tu framework lo permita, usa Tailwind y shadcn/ui por defecto para la capa de UI, y recurre a Motion y React Hook Form para animación y formularios. Los dos cambios que vale la pena interiorizar ahora son que el React Compiler elimina la mayor parte de la memorización manual de tu código de integración, y que la compatibilidad con RSC es un filtro estricto — el CSS-in-JS en tiempo de ejecución y el soporte RSC aún no estable limitan lo que encaja en una aplicación Next.js 16. Comienza desde estos valores predeterminados y luego cambia a una alternativa solo cuando un requisito específico — escala de GraphQL, enrutamiento con seguridad de tipos, animación física — realmente lo exija.

Preguntas Frecuentes

¿Puedo usar styled-components con React Server Components?

styled-components funciona con React Server Components solo detrás de un límite 'use client', porque inyecta estilos en tiempo de ejecución en el navegador, lo que entra en conflicto con el modelo de renderizado en el servidor de RSC. La biblioteca entró en modo de mantenimiento en marzo de 2025 y no se recomienda para nuevos proyectos, aunque sigue publicando versiones y añadió tematización con variables CSS compatible con RSC. Para nuevas aplicaciones RSC, Tailwind CSS v4 o CSS Modules son las opciones compatibles por defecto, ya que ambas generan estilos en tiempo de compilación en lugar de en tiempo de ejecución.

¿Cuál es la diferencia entre el modelo de propiedad de shadcn/ui y instalar una biblioteca como MUI?

shadcn/ui copia el código fuente de los componentes directamente en tu proyecto, de modo que eres propietario de los archivos y puedes editarlos sin ninguna dependencia versionada que actualizar ni migración por cambios incompatibles. MUI y Mantine se instalan como paquetes versionados que importas y actualizas con el tiempo, intercambiando control de personalización por actualizaciones gestionadas. El modelo de propiedad es adecuado para equipos que construyen sistemas de diseño personalizados y quieren control total de modificación; el modelo de dependencia es adecuado para equipos que quieren un sistema de diseño pulido y mantenido sin ser propietarios del código.

¿Cuándo debería usar Zustand en lugar de useState para el estado del cliente?

Usa Zustand cuando el estado deba compartirse entre componentes distantes que no tienen una relación directa padre-hijo, como un carrito de compras, un tema o datos de sesión accedidos desde muchos lugares. Usa useState o useReducer para el estado local de un componente o un subárbol pequeño, como borradores de formularios y toggles. Recurrir a Zustand para estado puramente local añade indirección sin beneficio, mientras que mantener estado genuinamente global en prop drilling o contexto genera problemas innecesarios de re-renderizado y acoplamiento.

¿El React Compiler reemplaza a TanStack Query o a una biblioteca de gestión de estado?

No. React Compiler 1.0, estable desde el 7 de octubre de 2025, memoriza automáticamente los componentes y los valores de los hooks en tiempo de compilación, eliminando la mayoría de las llamadas manuales a useMemo y useCallback, pero no gestiona el caché del estado del servidor, la recarga en segundo plano ni el compartir estado entre componentes. Sigues necesitando TanStack Query para el estado del servidor y Zustand o useState para el estado del cliente. El compilador cambia cuánto ajuste manual requieren estas integraciones, no si necesitas las bibliotecas en sí.