{"id":33301,"date":"2025-06-11T11:20:00","date_gmt":"2025-06-11T09:20:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=33301"},"modified":"2025-06-11T11:26:58","modified_gmt":"2025-06-11T09:26:58","slug":"bajo-la-superficie-de-react-explorando-las-profundidades-para-crear-mejores-desarrollos","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/bajo-la-superficie-de-react-explorando-las-profundidades-para-crear-mejores-desarrollos\/","title":{"rendered":"Bajo la superficie de React: Explorando las profundidades para crear mejores desarrollos"},"content":{"rendered":"\n

A medida que los desarrolladores progresan en sus carreras, trabajar con tecnolog\u00edas como React <\/strong>se vuelven algo tan natural como tomar caf\u00e9 por la ma\u00f1ana: incuestionable, autom\u00e1tico y reconfortante. Sin embargo, para alcanzar el nivel de Maestro Jedi, es necesario comprender lo que sucede bajo el cap\u00f3.<\/strong><\/p>\n\n\n\n

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

Esta sesi\u00f3n se celebr\u00f3 en Codemotion Madrid 2025, concretamente el mi\u00e9rcoles 21 de mayo a las 15:30 en el plat\u00f3 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\u00ed, no te preocupes: podr\u00e1s ver la charla en nuestro canal de YouTube.<\/p>\n\n\n\n

Contexto de la charla<\/h2>\n\n\n\n

Durante la \u00faltima d\u00e9cada, y tras mucha observaci\u00f3n, experiencia y aprendizaje, en NN Digital Hub, han observado un patr\u00f3n com\u00fan: incluso los desarrolladores experimentados a menudo construyen con abstracciones que nunca han diseccionado completamente<\/strong>. Y aunque parezca algo normal o sin importancia, la realidad es que puede tener un gran impacto en el resultado final de cualquier proyecto.<\/strong><\/p>\n\n\n\n

Pero esto no es algo exclusivo de React: sucede con la mayor\u00eda de frameworks y librer\u00edas populares. La familiaridad con las herramientas puede llevarnos a dar por sentado su funcionamiento interno<\/strong>, 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.<\/strong><\/p>\n\n\n\n

Y aunque el principal objetivo es crear c\u00f3digo que funcione, la falta de entendimiento profundo en el uso de<\/strong> herramientas abstra\u00eddas puede tener efectos negativos a largo plazo.<\/strong> Esto es m\u00e1s evidente en t\u00e9rminos de rendimiento y escalabilidad de proyectos medianos y\/o grandes.<\/p>\n\n\n\n

Por un lado, los problemas de rendimiento pueden manifestarse sutilmente al principio, pero crecer exponencialmente con el tiempo<\/strong>. Por otro, las decisiones arquitect\u00f3nicas basadas en un conocimiento superficial pueden limitar severamente la capacidad de evoluci\u00f3n de una aplicaci\u00f3n.<\/strong><\/p>\n\n\n\n

Por eso, entender los mecanismos internos de React no es solo una cuesti\u00f3n de ser el m\u00e1s pro de la sala, sino de una necesidad para construir aplicaciones robustas, seguras, escalables y mantenibles.<\/strong><\/p>\n\n\n\n

\u00bfSoluci\u00f3n? Toca bajar a las catacumbas<\/h2>\n\n\n\n

La soluci\u00f3n para evitar \u201cacomodarse\u201d y dejar de dar por sentadas las cosas es bajar a las catacumbas<\/strong>. Toca remangarse, olvidar de alguna manera todo lo que sab\u00edas hasta ahora y explorar las profundidades de React (o cualquier otra biblioteca) como si fuera la primera vez.<\/p>\n\n\n\n

Por ejemplo, podemos empezar cuestionandonos c\u00f3mo funciona el modelo de ejecuci\u00f3n de JavaScript<\/strong>. Todos tenemos presente que JavaScript es un lenguaje de ejecuci\u00f3n single-threaded, pero \u00bfc\u00f3mo maneja entonces la asincron\u00eda? \u00bfPor qu\u00e9 necesitamos entender c\u00f3mo interact\u00faa React con este modelo de ejecuci\u00f3n? <\/p>\n\n\n\n

Entre otras cosas, para no generar condiciones de carrera, memory leaks o problemas de rendimiento<\/strong> que podr\u00edan haberse evitado con un conocimiento m\u00e1s profundo.<\/p>\n\n\n\n

O por qu\u00e9 no preguntarnos sobre el Virtual DOM: \u00bfc\u00f3mo funciona realmente la reconciliaci\u00f3n?<\/strong> \u00bfQu\u00e9 impacto tiene en el rendimiento de nuestra aplicaci\u00f3n? 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\u00f3n.<\/p>\n\n\n\n

Y si hablamos de API de Hooks,<\/strong> que permiten usar estado, efectos y l\u00f3gica de ciclo de vida en componentes funcionales, podemos evitar efectos secundarios indeseados, como problemas de sincronizaci\u00f3n de estado, efectos que se ejecutan en momentos no deseados o errores como el famoso \u201cRendered fewer hooks than expected\u201d.<\/p>\n\n\n\n

En definitiva, conocer c\u00f3mo funciona internamente React nos permite tomar decisiones m\u00e1s inteligentes sobre la arquitectura y el rendimiento de nuestras aplicaciones<\/strong>. <\/p>\n\n\n\n

No se trata solo de escribir c\u00f3digo que funcione, sino de entender c\u00f3mo y por qu\u00e9 funciona<\/strong>. Esto evitar\u00e1 bugs dif\u00edciles de depurar, optimizar\u00e1 el rendimiento (cuantos menos renders, menos memoria) y que nuestra aplicaci\u00f3n React est\u00e9 lista para escalar sin que se vuelva inestable.<\/p>\n\n\n\n

La charla: \u201cBajo la superficie de React. Explorando las profundidades para crear mejores desarrollos\u201d<\/h2>\n\n\n\n

Miguel Mart\u00edn L\u00f3pez<\/strong> (DevOps Application Engineer) y Roger Sanz Cort\u00e9s<\/strong> (Frontend Engineer) de NN Digital Hub, ya han bajado a las profundidades de React y quisieron compartir sus descubrimientos con la comunidad de desarrolladores.<\/p>\n\n\n\n

Durante esta charla, se exploraron los mecanismos internos m\u00e1s importantes de React<\/strong>, desde el modelo de ejecuci\u00f3n hasta los detalles m\u00e1s intrincados del proceso de reconciliaci\u00f3n. Su objetivo es ayudar a los desarrolladores a construir aplicaciones m\u00e1s robustas y eficientes, dot\u00e1ndolos de un conocimiento profundo que va m\u00e1s all\u00e1 de la simple implementaci\u00f3n.<\/p>\n\n\n\n

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

Nos hizo revisitar herramientas cotidianas con nuevos ojos<\/strong>, descubrimos peque\u00f1as claves para mejorar el rendimiento y aprendimos c\u00f3mo los peque\u00f1os detalles de una implementaci\u00f3n pueden afectar a la escalabilidad y el mantenimiento en grandes bases de c\u00f3digo.<\/p>\n\n\n\n

Los ponentes<\/h2>\n\n\n\n