Entendiendo los Patrones de Renderización

Rate this content
Bookmark

React ha explotado en popularidad gracias al rendimiento y la experiencia de desarrollo inigualable que el DOM virtual y la reconciliación podrían ofrecer. Pero a medida que nuestras aplicaciones crecían, comenzamos a empujar los límites de la gestión del estado del cliente de una manera eficiente. Veamos cómo lograr una reactividad de grano fino y qué aporta la reanudabilidad a la mesa.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Atila Fasina es un ingeniero DevRel en Crab Nebula y un Experto Desarrollador de Google que comparte conocimientos sobre patrones de renderizado en React y otras tecnologías web.

El DOM virtual en React es una abstracción del DOM real que permite a React agrupar todos los cambios en el DOM antes de realizar una actualización, optimizando el proceso de renderizado y mejorando el rendimiento al evitar operaciones costosas en el DOM.

La memoización en React es una técnica que permite memorizar componentes basados en las props que utilizan, de modo que solo se vuelven a renderizar si las props cambian. Esto ayuda a reducir re-renderizados innecesarios y mejora el rendimiento de la aplicación.

Un cambio en una prop dentro de un proveedor de contexto en React puede causar que todos los componentes hijos de ese proveedor se vuelvan a renderizar, lo que puede llevar a un rendimiento subóptimo si no se maneja cuidadosamente.

Las señales, como se utilizan en frameworks como SolidJS y Vue, permiten una reactividad de grano fino al desacoplar la lógica de renderización de los datos. A diferencia del VDOM, las señales notifican a los componentes sobre cambios específicos, permitiendo actualizaciones más controladas y eficientes.

En Vue se utilizan ref y shallow ref para definir señales, en Quick se usa use signal para configurar y acceder a valores, y en Angular se definen señales que se pueden actualizar y acceder a través de getters de función.

Atila Fassina
Atila Fassina
9 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute los patrones de renderización en la web, incluyendo el uso de React y el concepto de memoización. Explora la idea de usar señales para cambiar datos sin un re-renderizado completo y cómo marcos de trabajo como SolidJS, Vue, Svelte y Angular están adoptando señales. El equipo de React está desarrollando React para Get, un compilador que proporciona auto-memoización para reducir re-renderizados innecesarios. Diferentes marcos de trabajo tienen sus propias formas de usar señales, como ref superficial o ref en Vue, usar señal en Quick, y definir y acceder a señales en Angular y Svelte.
Available in English: Understanding Rendering Patterns

1. Introducción a los patrones de renderizado en la web

Short description:

Hola, vecindario de React. Hoy, discutiré los patrones de renderizado en la web, incluyendo el uso de React y el concepto de memoización. React introdujo la idea de abstraer el DOM y usar un DOM virtual para agrupar cambios y mejorar el rendimiento. Sin embargo, al usar un proveedor de contexto, todos los componentes hijos se vuelven a renderizar, lo que puede llevar a posibles problemas de rendimiento. Para abordar esto, el equipo de React está desarrollando React for Get, un compilador que proporciona auto-memoización. Esto permite que los componentes se memoricen en función de las props que utilizan, reduciendo los re-renderizados innecesarios y mejorando el rendimiento. Sin embargo, la memoización no es reactividad de grano fino, lo que lleva a la exploración de ideas alternativas para desafiar el DOM virtual.

Hola, React vecindario. Estamos aquí para hablar sobre los patrones de renderizado en la web. Entonces, primero que nada, ¿quién soy yo? Mi nombre es Atila Fasina, y soy un ingeniero DevRel en Crab Nebula. También soy un Experto Desarrollador de Google y puedes encontrarme en cada una de esas redes allí. Tengo un práctico ... Conseguí un práctico ... algunos atajos prácticos para ti, porque nombrar cosas en la web es difícil, y también puedes encontrarme aquí en esta plataforma en atila.io.

Entonces, hablemos de renderizar cosas en la web. Primero estaba React con un montón de ideas muy geniales, como usar la UI como una función del estado, y con eso llegó la UI declarativa, renderizando props, flujo unidireccional, y Pero garantizar la consistencia puede hacer que el DOM sea lento, porque eliminar y volver a agregar elementos al DOM es una acción muy costosa. Entonces React y otros frameworks tuvieron la idea de abstraer el DOM, y luego podemos agrupar todos los cambios, y luego reconciliar los cambios y agregar todo junto de una vez. Entonces, con eso, tenemos este modelo de renderizado, donde puedes juntar todos los cambios en un lote, y abstraemos el DOM en un DOM virtual, y eso nos da este árbol de componentes basado en los datos que tienen. Entonces, esencialmente en este caso, tienes el componente padre con las props A y B, pero entonces si la prop A cambia, todo lo que depende de A también va a cambiar. Pero no nos detenemos allí, porque no hay forma de rastrear en el DOM virtual qué son las cosas que cambian. Entonces, todo lo que realmente es un hijo de donde vive la prop A y se define se vuelve a renderizar también. Y si eres un desarrollador de React, que creo que la mayoría de ustedes lo son, has visto eso un montón de veces, has hablado de eso un montón de veces, y nada de eso es nuevo. En mi experiencia, lo que se vuelve nuevo es cuando tenemos un proveedor de contexto en este caso. Y entonces estamos inclinados a pensar que si cambiamos una prop en un proveedor de contexto, solo los componentes que usan esa prop van a volver a renderizarse. Pero esencialmente lo que sucede es que todo lo que es un hijo de ese proveedor de componentes cambia. Y por eso, en mi experiencia, he visto a un montón de personas pisando una mina terrestre porque terminas volviendo a renderizar toda tu aplicación con un solo cambio de prop. Entonces, con eso en mente, el equipo de React está trabajando en este compilador, que es React for Get, que además de garantizar un montón de buenas mejores prácticas, también va a proporcionar auto-memorización. ¿Qué es eso? Lo que eso significa es que los componentes van a ser memorizados en función de las props que usan. Entonces, si un componente usa la prop A, se va a memorizar para solo renderizar si la prop A cambia. Y luego si no está usando ninguna prop, solo estados locales, no se va a renderizar en base a otros cambios, y para las props B y así sucesivamente. Entonces eso puede encapsular los re-renderizados y contenerlos. Esa es una idea muy buena y al hacer eso, puede permitir que algunos renderizados no ocurran realmente, y por lo tanto, el modelo mental se vuelve un poco más fácil de razonar cuando estás hablando, especialmente a las personas que vienen a React. Pero esencialmente la idea de la memoización es para grandes cálculos. Entonces, la parte de auto-memoización es más, en mi opinión, una cosa de DX que un cambio real a una optimización de rendimiento. A eso también debemos decir que la memoización en realidad no es reactividad de grano fino. Y con eso, abrimos el camino para ir un poco más granular. Entonces, surgieron algunas ideas para desafiar el VDOM.

2. Señales y su uso en marcos de trabajo

Short description:

En lugar de volver a renderizar todo el componente, las señales te permiten cambiar los datos sin necesidad de una re-renderización completa. Marcos de trabajo como SolidJS, Vue, Svelte y Angular están evaluando o adoptando señales. La reactividad de grano fino requiere más control y conciencia de las actualizaciones de datos. Entender la herramienta elegida es esencial. Diferentes marcos de trabajo tienen sus propias formas de usar señales, como shallow ref o ref en Vue, use signal en Quick, y definir y acceder a señales en Angular y Svelte. Los desarrolladores están explorando mejores formas de describir la interfaz de usuario con señales. Ven a charlar conmigo en X o encuéntrame en YouTube.

Por ejemplo, en lugar de renderizar y agrupar los cambios y volver a renderizar, surgió una nueva idea de que si renderizas cosas, puedes tocar solo lo que cambiaste. Entonces eso esencialmente se traduce en desacoplar la lógica de renderización de los data. Y eso es exactamente de lo que tratan las señales. Puedes cambiar los data sin necesidad de volver a renderizar todo tu componente. Utiliza el patrón de observador, que esencialmente, los data son capaces de notificarte cuando ocurren cambios. Tu sistema de renderización puede rastrear si los cambios ocurren. Y luego, cuando estás renderizando, la parte que es responsable de tu interfaz de usuario puede obtener el nuevo valor en este caso. Entonces, mirando nuestro panorama de frameworks, lo que sucedió es que SolidJS llegó y dijo, Oh, me gustan las señales, vamos a traerlas de vuelta. Y todos los demás frameworks estaban más orientados hacia VDOM, algunos de ellos como Svelte y Vue, más específicamente, estaban haciendo algunas otras cosas que estaban más en línea con lo que son las señales. Y adelantándonos un par de años, todos los frameworks están evaluando o adoptando señales mientras hablamos, por lo que este gráfico es muy representativo de como Vue 3 y Svelte 5, pero QUIC y Angular ya tienen señales en algún lugar de su base de código. Pero sería deshonesto si no hablara de los compromisos, uno de ellos es que la reactividad de grano fino es un poco menos resistente que el VDOM porque requiere que tengas más control y requiere un poco de cuidado para no desechar todo y luego hacerlo. Entonces, si vas a ir a grano fino, necesitas estar más consciente de cómo se actualizan tus data y asegurarte de que tu componente puede responder. También frameworks como SolidJS tiene un montón de ayudantes que pueden ayudarte a asegurar esta reactivity para proporcionar una gran developer experience. Pero de todos modos la conclusión de mi charla es que en realidad no hay almuerzo gratis. Puedes elegir VDOM, puedes elegir señales, pero al final del día necesitas entender la herramienta que estás utilizando. Y solo para que puedas terminar, veamos cómo se utilizan las señales en diferentes frameworks. Como por ejemplo Vue, tienes el shallow ref o ref donde puedes definirlos. En Quick tienes el use signal y luego puedes configurar, puedes cambiar el valor así y puedes acceder al valor con el valor de countout y esencialmente el compilador los va a convertir en getters y setters como las señales necesitan. Para Angular defines una señal así y puedes establecerla o actualizar la señal basándote en el valor anterior y puedes acceder a la señal mediante un getter de función. Para Svelte defines una señal y puedes crear un getter y puedes crear un setter para esa señal también. Entonces, para resumir nuestra breve charla, lo que sucedió es que teníamos un modelo que era bastante bueno para lo que teníamos antes con React y el dom virtual y todos los demás frameworks usándolos. Ahora mismo muchos desarrolladores están pensando que hay mejores formas de describir la interfaz de usuario con señales y cosas así y por lo tanto más frameworks están yendo en esa dirección y te recomiendo que le eches un vistazo a eso. Y eso fue todo lo que tenía para ti. Así que muchas gracias. Por favor, ven y charlemos en X o mírame en YouTube. ¡Adiós!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
Pensando en React Query
React Summit 2023React Summit 2023
22 min
Pensando en React Query
Top Content
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
React Slots: una nueva forma de composición
React Advanced Conference 2022React Advanced Conference 2022
21 min
React Slots: una nueva forma de composición
Top Content
Today's Talk introduces React Snots, a new way of composition for design systems. The configuration way provides flexibility but can lead to uncontrolled use cases and wrong patterns. React Slots RFC was created to address the limitations of React's support for web components and slots. It introduces createHost and createSlot APIs to enable component composition and solve previous problems. React Slots RFC allows for flexible component styling and the creation of complex structures without rendering them to the browser.
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
React Advanced Conference 2021React Advanced Conference 2021
20 min
Patrones avanzados para la gestión de API en aplicaciones React a gran escala
Top Content
This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.
7 Patrones de TypeScript que Deberías Estar Usando
React Summit 2023React Summit 2023
19 min
7 Patrones de TypeScript que Deberías Estar Usando
Top Content
This Talk introduces 7 essential TypeScript patterns for React development, including children, spreading props, either-or, generic components, and context. The speaker demonstrates various implementations and provides examples using a fictional dog grooming salon application. Other interesting ideas include using omit and make required types, creating components with either-or interfaces, and using generics, memorization, and context in React. The speaker also introduces the Recontextual library for context management.

Workshops on related topic

Master Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Master Patrones de JavaScript
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante este masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debe conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final del masterclass, los participantes ganarán confianza en su capacidad para escribir código JavaScript de alta calidad que perdure en el tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento profesional y las oportunidades de avance en la industria del software
Mejores Prácticas y Patrones para Administrar Solicitudes de API y Estados
React Advanced Conference 2022React Advanced Conference 2022
206 min
Mejores Prácticas y Patrones para Administrar Solicitudes de API y Estados
Workshop
Thomas Findlay
Thomas Findlay
Con el surgimiento de frameworks, como React, Vue o Angular, la forma en que se construyen los sitios web ha cambiado a lo largo de los años. Las aplicaciones modernas pueden ser muy dinámicas y realizar múltiples solicitudes de API para poblar un sitio web con contenido actualizado o enviar nuevos datos a un servidor. Sin embargo, este cambio de paradigma ha introducido nuevos problemas con los que los desarrolladores deben lidiar. Cuando una solicitud de API está pendiente, tiene éxito o falla, el usuario debe recibir una retroalimentación significativa. Otros problemas pueden incluir el almacenamiento en caché de datos de API o la sincronización del estado del cliente con el servidor. Todos estos problemas requieren soluciones que deben ser codificadas, pero pueden volverse rápidamente inmanejables y dar como resultado una base de código difícil de ampliar y mantener. En este masterclass, cubriremos cómo manejar las solicitudes de API, los estados de API y la cancelación de solicitudes mediante la implementación de una Capa de API y combinándola con React-Query.
Prerrequisitos: Para aprovechar al máximo este masterclass, debes estar familiarizado con React y Hooks, como useState, useEffect, etc. Si deseas codificar junto con nosotros, asegúrate de tener Git, un editor de código, Node y npm instalados en tu máquina.