• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Codemotion Magazine

We code the future. Together

  • Discover
    • Events
    • Community
    • Partners
    • Become a partner
    • Hackathons
  • Magazine
    • DevOps
    • Carreras tech
    • Frontend
    • Inteligencia Artificial
    • Dev life
    • Desarrollo web
  • Talent
    • Discover Talent
    • Jobs
    • Manifiesto
  • Companies
  • For Business
    • EN
    • IT
    • ES
  • Sign in

Codemotionjunio 11, 2025 5 min read

Bajo la superficie de React: Explorando las profundidades para crear mejores desarrollos

Frontend
facebooktwitterlinkedinreddit

A medida que los desarrolladores progresan en sus carreras, trabajar con tecnologías como React se vuelven algo tan natural como tomar café por la mañana: incuestionable, automático y reconfortante. Sin embargo, para alcanzar el nivel de Maestro Jedi, es necesario comprender lo que sucede bajo el capó.

Para crear aplicaciones realmente excepcionales, necesitamos sumergirnos en las profundidades de React y entender sus mecanismos internos. Y esto es de lo que nos hablaron Miguel Martín y Roger Sanz, de NN Digital Hub, en la charla Bajo la superficie de React: Explorando las profundidades para crear mejores desarrollos.

Recommended article
junio 12, 2025

Componentes: Integraciones simples, funcionalidades poderosas

Codemotion

Codemotion

Frontend

Esta sesión se celebró en Codemotion Madrid 2025, concretamente el miércoles 21 de mayo a las 15:30 en el plató 5. Si quieres seguir creciendo como profesional y aprender a mirar lo cotidiano desde otro punto de vista, no te la pudiste perder. Pero, si fue así, no te preocupes: podrás ver la charla en nuestro canal de YouTube.

Contexto de la charla

Durante la última década, y tras mucha observación, experiencia y aprendizaje, en NN Digital Hub, han observado un patrón común: incluso los desarrolladores experimentados a menudo construyen con abstracciones que nunca han diseccionado completamente. Y aunque parezca algo normal o sin importancia, la realidad es que puede tener un gran impacto en el resultado final de cualquier proyecto.

Pero esto no es algo exclusivo de React: sucede con la mayoría de frameworks y librerías populares. La familiaridad con las herramientas puede llevarnos a dar por sentado su funcionamiento interno, limitando nuestra capacidad para optimizar y resolver problemas de manera profunda. Sin embargo, tampoco es algo que nos replanteemos muy a menudo: si funciona, es suficiente.

Y aunque el principal objetivo es crear código que funcione, la falta de entendimiento profundo en el uso de herramientas abstraídas puede tener efectos negativos a largo plazo. Esto es más evidente en términos de rendimiento y escalabilidad de proyectos medianos y/o grandes.

Por un lado, los problemas de rendimiento pueden manifestarse sutilmente al principio, pero crecer exponencialmente con el tiempo. Por otro, las decisiones arquitectónicas basadas en un conocimiento superficial pueden limitar severamente la capacidad de evolución de una aplicación.

Por eso, entender los mecanismos internos de React no es solo una cuestión de ser el más pro de la sala, sino de una necesidad para construir aplicaciones robustas, seguras, escalables y mantenibles.

¿Solución? Toca bajar a las catacumbas

La solución para evitar “acomodarse” y dejar de dar por sentadas las cosas es bajar a las catacumbas. Toca remangarse, olvidar de alguna manera todo lo que sabías hasta ahora y explorar las profundidades de React (o cualquier otra biblioteca) como si fuera la primera vez.

Por ejemplo, podemos empezar cuestionandonos cómo funciona el modelo de ejecución de JavaScript. Todos tenemos presente que JavaScript es un lenguaje de ejecución single-threaded, pero ¿cómo maneja entonces la asincronía? ¿Por qué necesitamos entender cómo interactúa React con este modelo de ejecución? 

Entre otras cosas, para no generar condiciones de carrera, memory leaks o problemas de rendimiento que podrían haberse evitado con un conocimiento más profundo.

O por qué no preguntarnos sobre el Virtual DOM: ¿cómo funciona realmente la reconciliación? ¿Qué impacto tiene en el rendimiento de nuestra aplicación? Pues porque este proceso es el que determina la eficiencia de React, y ignorar u olvidar su verdadera esencia puede provocar renders innecesarios o incluso romper la memorización.

Y si hablamos de API de Hooks, que permiten usar estado, efectos y lógica de ciclo de vida en componentes funcionales, podemos evitar efectos secundarios indeseados, como problemas de sincronización de estado, efectos que se ejecutan en momentos no deseados o errores como el famoso “Rendered fewer hooks than expected”.

En definitiva, conocer cómo funciona internamente React nos permite tomar decisiones más inteligentes sobre la arquitectura y el rendimiento de nuestras aplicaciones. 

No se trata solo de escribir código que funcione, sino de entender cómo y por qué funciona. Esto evitará bugs difíciles de depurar, optimizará el rendimiento (cuantos menos renders, menos memoria) y que nuestra aplicación React esté lista para escalar sin que se vuelva inestable.

La charla: “Bajo la superficie de React. Explorando las profundidades para crear mejores desarrollos”

Miguel Martín López (DevOps Application Engineer) y Roger Sanz Cortés (Frontend Engineer) de NN Digital Hub, ya han bajado a las profundidades de React y quisieron compartir sus descubrimientos con la comunidad de desarrolladores.

Durante esta charla, se exploraron los mecanismos internos más importantes de React, desde el modelo de ejecución hasta los detalles más intrincados del proceso de reconciliación. Su objetivo es ayudar a los desarrolladores a construir aplicaciones más robustas y eficientes, dotándolos de un conocimiento profundo que va más allá de la simple implementación.

En esta charla exploraro los fundamentos profundos que impulsan el desarrollo frontend actual, desde el modelo de ejecución de JavaScript hasta los detalles internos del comportamiento de renderizado de React, el proceso de reconciliación y la API de hooks.

Nos hizo revisitar herramientas cotidianas con nuevos ojos, descubrimos pequeñas claves para mejorar el rendimiento y aprendimos cómo los pequeños detalles de una implementación pueden afectar a la escalabilidad y el mantenimiento en grandes bases de código.

Los ponentes

  • Miguel Martín López – DevOps Application Engineer en NN Digital Hub: Comencé mi andadura profesional técnica hace unos 20 años, trabajando inicialmente en empresas de marketing. A lo largo de los años, adquirí experiencia diversa en varios sectores, como el inmobiliario, la televisión y la banca. La mayor parte de mi carrera la he dedicado a trabajar como ingeniero full-stack y, en los últimos años, he asumido el papel de tech lead. Actualmente, formo parte de NN Digital Hub, donde, gracias a mi amplia experiencia y a la versatilidad de mis funciones, contribuyo como arquitecto y desarrollador, en función de los requisitos del proyecto.
  • Roger Sanz Cortés – Frontend Engineer en NN Digital Hub: soy Ingeniero de Software en NN Group, con sede en Barcelona. Graduado en Ingeniería Electrónica y Automática, descubrí muy pronto mi pasión por la programación. Mi trayectoria profesional me ha llevado desde el desarrollo backend hasta especializarme en frontend, particularmente con React. He trabajado en áreas de comercio electrónico y logística, centrándome en la creación de interfaces fáciles de usar y la implementación de pruebas de extremo a extremo. Mi compromiso con la calidad y el aprendizaje continuo ha sido una constante a lo largo de mi carrera.

Artículos relacionados

Migrando 400.000 líneas de código

Codemotion
abril 28, 2025

Zustand: Todo lo que debes saber para dominarlo

Orli Dun
enero 27, 2025

Creamos un diseño de caja bento usando CSS moderno

Massimo Avvisati
enero 22, 2025

React y Tailwind CSS: La dupla perfecta para tus interfaces de usuario

Orli Dun
enero 13, 2025
Share on:facebooktwitterlinkedinreddit
Codemotion
Artículos escritos por el equipo de Codemotion. Noticias sobre tecnología, inspiración para devs, las últimas tendencias en desarrollo de software y mucho más.
Agentes de IA: la nueva era del software inteligente
Artículo anterior
Componentes: Integraciones simples, funcionalidades poderosas
Próximo artículo

Footer

Discover

  • Events
  • Community
  • Partners
  • Become a partner
  • Hackathons

Magazine

  • Tech articles

Talent

  • Discover talent
  • Jobs

Companies

  • Discover companies

For Business

  • Codemotion for companies

About

  • About us
  • Become a contributor
  • Work with us
  • Contact us

Follow Us

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions