React: años después, gracias a Astro

Mientras muchos estaban over React como me ocurrió hace unos cinco años, decidí darle otra oportunidad a React tras descubrir Astro y resucité mi intento abandonado de una app de lista de lectura para aprender a usar React 19 como es debido en 2025.

También redescubrí la Opinionated Guide to React de Sara Vieira, que me llevó de vuelta a 2020, cuando React 17 deprecó los métodos de ciclo de vida en favor de los hooks. Aunque algunos capítulos están desactualizados, otros siguen siendo sorprendentemente vigentes en 2025, especialmente su enfoque pragmático de quizá no lo necesites.

Buena parte de mi descontento en aquel proyecto no era por React en sí, sino por decisiones opinables o ya superadas, como el preset de ESLint Airbnb o CSS in JS con Emotion o Styled Components. Otras ni siquiera eran de React, como el uso extensivo de funciones flecha de ES6 que entonces me resultaban poco familiares.

Tras el llamado escándalo de useEffect por el cambio de comportamiento en React 18, React introdujo el hook use en React 19 en 2024 como alternativa moderna para sincronizar datos y efectos.

Estilo de código compacto vs TypeScript. Hooks, JSX, el operador spread y las funciones flecha compactan el código, a veces a costa de la legibilidad según cada quien. Astro y MDX también mezclan sintaxis de forma implícita, y lo mismo hacen Vue y Svelte. TypeScript devuelve claridad y algo de verbosidad, convirtiendo JSX en TSX y mi flujo en una especie de interrogatorio de parar y seguir. Aun así sigo siendo optimista y creo que me gustará TypeScript tanto como JSDoc.

Motivos para el optimismo. React 19 incluye optimizaciones que reducen la necesidad de definir suspense boundaries explícitos y disminuyen el peso de useEffect, useMemo y useCallback en muchos casos. Pasar refs como props vuelve prescindible forwardRef en la mayoría de escenarios. Además, llegan hooks como useActionState, useFormStatus y useOptimistic. React 19 también mejora los componentes del lado del servidor, aunque cuando usamos Astro esto pesa menos.

Qué está desfasado o en retirada. Los métodos de ciclo de vida han quedado atrás en favor de hooks. Los componentes de clase ceden el paso a funciones. PropTypes deja paso a TypeScript. useEffect no está deprecado, pero en muchos casos conviene preferir use. forwardRef, useMemo y useCallback siguen existiendo, pero suelen ser menos necesarios.

Términos esenciales en React. Estado es información mutable dentro de un componente. Props son datos de solo lectura que viajan de padre a hijo. Un efecto es cualquier cosa que hace una función además de devolver un valor, y en React lo gestionamos con hooks. El flujo de datos inverso describe cómo los datos de un componente hijo, como un campo de texto, suben a su padre o a un contexto global. Elevar el estado consiste en encontrar la forma menos compleja de compartir datos entre componentes relacionados, por ejemplo en un formulario con varios campos.

Opiniones que conviene revisar según el caso. Añadir sistemas de estado como Redux o MobX, apostar por CSS in JS, apostar por componentes controlados para formularios o exigir linters con reglas muy rígidas como Airbnb son decisiones de estilo, no obligaciones. React también puede vivirse con TSX o sin él, con patrones funcionales puros o combinando utilidades.

Componentes controlados vs hooks de estado de formulario. Los inputs controlados convierten al Virtual DOM en fuente de la verdad y pueden provocar re renders mientras el usuario teclea, con posibles sensaciones de lentitud y riesgos de perder accesibilidad si se sustituye el formulario HTML5 de forma incompleta. Aun así son muy útiles para validaciones complejas como procesos multistep. La alternativa moderna en React 19 es manejar eventos onChange sin controlar por completo el input y apoyarse en useActionState y useFormStatus, que simplifican mucho la gestión de formularios sin sacrificar usabilidad.

Re render e hidratación vs rendimiento web. React ha mitigado la interactividad tardía con renderizado en servidor, aprendiendo del enfoque JAMStack. El tiempo hasta ser interactivo es un indicador clave de rendimiento y UX. Si la página tarda demasiado, el usuario se marcha; si ve elementos pero no puede interactuar, se frustra.

Islas interactivas en Astro. Astro renderiza todo en estático por defecto, sin JavaScript inicial y con interactividad inmediata percibida. Podemos mezclar Astro, React, Vue u otros y decidir por componente cuándo y cómo hidratarlo, habilitando carga diferida. En un sitio de contenidos con un buscador, la vista inicial es estática, óptima para SEO y percepción de velocidad, y solo el buscador se hidrata al principio; tras una consulta, React actualiza de forma interactiva la zona de resultados. Varias islas de React pueden comunicarse mediante contexto y las secciones estáticas permanecen intactas, lo que mantiene el conjunto ligero. Con Astro es posible reutilizar el mismo componente de React en modo estático e interactivo, escribir TypeScript limpio y definir el contenido con Zod. El lado menos amable es que cualquier desajuste de tipos puede provocar fallos de build y a veces los errores de Astro no señalan la línea exacta, lo cual recuerda a etapas tempranas de otros frameworks. En caso de duda, usar Astro para contenido y render estático y React para la interactividad suele dar un buen equilibrio.

Contenido dinámico con Astro. Entre lo estático y lo interactivo existe lo dinámico en tiempo de build. Las colecciones de contenido se renderizan de forma implícita salvo que haya que ordenar o filtrar. También puede generarse un JSON estático en build y consumirlo desde React para filtrar en cliente cuando el dataset es pequeño, aunque para escalar conviene evitar sobrecarga y delegar búsquedas en un servidor. En Astro, las rutas se definen por nombre de archivo en la carpeta de páginas, por ejemplo pages app.astro expone la URL pública app. Si añadimos pages books.json.ts podemos producir un JSON con el listado, devolviendo el tipo de contenido adecuado y beneficiándonos de SSR cuando lo activamos, o de SSG si preferimos compilación estática.

Para profundizar, los recursos Thinking in React, This Week in React, las novedades de React 19, la referencia del hook use, guías sobre compartir estado, rendimiento en fetching de datos, mocking de requests en Storybook, el addon de Vitest y los capítulos de funciones en TypeScript son lecturas muy recomendables.

Conclusión. He modernizado un proyecto personal, he actualizado mis conocimientos de React y TypeScript y he empezado a integrar Tailwind, daisyUI, Vite, Vitest y Playwright en una aplicación web moderna con Astro, logrando interactividad sin sacrificar usabilidad ni rendimiento. El proyecto sigue en evolución y se despliega de forma continua, lo que me permite mejorar entre trabajos.

En Q2BSTUDIO ayudamos a empresas a conseguir lo mismo en producción con aplicaciones a medida, software a medida, inteligencia artificial aplicada, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, además de automatización de procesos y agentes IA. Si buscas un socio para llevar tu arquitectura con React 19 y Astro al siguiente nivel, descubre cómo enfocamos el desarrollo de aplicaciones y software a medida con foco en rendimiento, accesibilidad y escalabilidad.

Si tu organización quiere desplegar buscadores con islas interactivas, personalizar la experiencia con modelos de ia para empresas o integrar asistentes que dialoguen con tus datos, explora nuestra práctica de inteligencia artificial, donde combinamos arquitectura cloud, MLOps y seguridad para crear soluciones reales de valor.