React Concurrency, Explicado

Spanish audio is available in the player settings
Rate this content
Bookmark

¡React 18! ¡Funciones concurrentes! Es posible que ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las funciones de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay pastel gratis!), y por qué Vue.js y Preact se negaron rotundamente a implementar algo similar

23 min
02 Jun, 2023

Video Summary and Transcription

La representación concurrente de React 18, específicamente el gancho useTransition, optimiza el rendimiento de la aplicación al permitir que las actualizaciones no urgentes se procesen sin congelar la interfaz de usuario. Sin embargo, existen desventajas como un mayor tiempo de procesamiento para las actualizaciones no urgentes y un mayor uso de la CPU. El gancho useTransition funciona de manera similar al throttling o bouncing, lo que lo hace útil para abordar problemas de rendimiento causados por múltiples componentes pequeños. Bibliotecas como React Query pueden requerir el uso de APIs alternativas para manejar las actualizaciones urgentes y no urgentes de manera efectiva.

Available in English

1. Introducción a la Representación Concurrente

Short description:

¡1.489 días! Esto es el tiempo que pasó entre la primera revisión de Dan Mobromov de lo que en aquel entonces se llamaba Time Slicing y el lanzamiento de Direct18, que finalmente hizo estas capacidades disponibles para todos. En estos 1.489 días, Time Slicing pasó por varios cambios de marca, varios cambios en la API y hoy en día se conoce como representación concurrente. Ahora, la representación concurrente incluye generalmente dos características. Hooks como useTransition y useDefaultValue y mejoras en el suspense y la hidratación. También hay una tercera característica de rendimiento que Direct18 lanzó, una mejor agrupación de actualizaciones, pero no forma parte de la concurrencia. Así que cuando probé por primera vez trabajar con estas características concurrentes, especialmente con cosas como useTransition, a veces realmente se sentía como magia en términos de cómo optimiza la aplicación. Así que hoy quiero mostrarles qué sucede realmente en la aplicación cuando se utiliza la primera característica de rendimiento más fundamental, useTransition, y cómo Rack logra esta magia, que en realidad no es magia en absoluto. Así que sumerjámonos en los hooks useTransition, useDefaultValue y para mostrarlos, permítanme mostrarles una aplicación lenta.

Esto es el tiempo que pasó entre la primera revisión de Dan Mobromov de lo que en aquel entonces se llamaba Time Slicing y el lanzamiento de Direct18, que finalmente hizo estas capacidades disponibles para todos. En estos 1.489 días, Time Slicing pasó por varios cambios de marca, varios cambios en la API, y hoy en día se conoce como representación concurrente.

Ahora, la representación concurrente incluye generalmente dos características. Hooks como useTransition y useDefaultValue y mejoras en el suspense y la hidratación. También hay una tercera característica de rendimiento que Direct18 lanzó, una mejor agrupación de actualizaciones, pero no forma parte de la concurrencia.

Así que cuando probé por primera vez trabajar con estas características concurrentes, especialmente con cosas como useTransition, a veces realmente se sentía como magia en términos de cómo optimiza la aplicación. Así que hoy quiero mostrarles qué sucede realmente en la aplicación cuando se utiliza la primera, la característica de rendimiento más fundamental, useTransition, y cómo Rack logra esta magia, que en realidad no es magia en absoluto. Así que sumerjámonos en los hooks useTransition, useDefaultValue y para mostrarlos, permítanme mostrarles una aplicación lenta.

2. Problema de rendimiento con la filtración de nodos

Short description:

Entonces, esta es una aplicación básica de toma de notas que experimenta un rendimiento lento al filtrar nodos. La interfaz de usuario se congela y se retrasa, lo que causa demoras en las actualizaciones. Al analizar la aplicación con DevTools Profiler, se observa un pico de actividad de la CPU, con un evento keydown que tarda mucho tiempo en procesarse. El evento desencadena una serie de llamadas a funciones de React, lo que resulta en la representación de múltiples componentes. Este proceso de volver a representar es una operación de detención del mundo, lo que provoca demoras en la interacción del usuario. Para solucionar este problema de rendimiento, el desarrollador busca sugerencias sobre cómo resolverlo, específicamente en el contexto de React 17.

Entonces, esta es una aplicación básica de toma de notas. ¡Ups! ¡Oh, espera! ¡Oh, no! Espera. Lo siento. Esto. Sí. ¡Ah! Sí, volvimos. Entonces, esta es una aplicación básica de toma de notas y tiene una lista de nodos que se pueden filtrar. Y si intentas filtrar estos nodos, la aplicación se vuelve lenta. Puedes notarlo si observas este cubo de hielo que gira. Es un spinner que se congela cuando la aplicación se congela, cuando la página se congela, y, bueno, gira cuando no está congelado, como lo opuesto al hielo.

Si intento escribir, si intento filtrar nodos, si intento escribir la letra F, por ejemplo, puedes notar cómo el spinner se congela durante uno o dos segundos. Si intento escribir más, puedes ver cómo la aplicación se retrasa mientras escribo. No puedes sentirlo realmente porque estoy escribiendo detrás del teclado. Pero puedes ver cómo escribo y la aplicación se siente realmente, realmente lenta. Las actualizaciones de la interfaz de usuario ocurren con retraso y la aplicación se congela durante uno o dos segundos.

Entonces, ahora, cada vez que tengo un problema de rendimiento, lo que me gusta hacer es abrir DevTools Profiler, DevTools Performance, y tratar de registrar lo que está sucediendo en la aplicación con el panel de rendimiento. En este caso, si hago clic en grabar y trato de escribir, y luego detengo la grabación, veré que lo que está sucediendo en la aplicación es que tengo un pico enorme de actividad de la CPU de 500 ms, y si me acerco a ese pico de actividad de la CPU, veré que tengo un solo evento keydown que tarda 550 ms en procesarse, y debajo de ese evento, hay muchas llamadas a funciones de React.

Entonces, ahora, si profundizara un poco más en la depuración y tratara de averiguar qué está sucediendo, vería esto. Esto es lo que sucede en la aplicación. Lo que sucede es que estoy escribiendo en el campo de texto, los filtros de entrada, eso llama a esta función de filtro establecido, que es solo un gancho useState, que, a su vez, cambia el estado en un montón de componentes, y eso hace que React renderice todos estos componentes uno por uno hasta que termine. Y debido a que tenemos muchos componentes, muchos botones de nodos, eso lleva un tiempo. Esta representación nuevamente es una operación de detención del mundo. Nada puede suceder hasta que React haya terminado. Si un usuario intenta interactuar con la aplicación de alguna manera, tendrá que esperar hasta que se complete la representación. Si la representación de la aplicación lleva dos segundos, el usuario tendrá que esperar dos segundos. Así es como funciona React 17, React 16, incluso React 18 funciona de manera predeterminada. Un comportamiento de bloqueo de JavaScript bastante estándar.

Ahora, retrocedamos un poco. Tenemos un problema de rendimiento, ¿verdad? Estoy escribiendo en el campo de texto, y ese campo de texto va a una lista de nodos para volver a representar, y esta representación es bloqueante y costosa, lo que ralentiza la aplicación y ralentiza todo el proceso de escritura. Entonces, mi pregunta para ustedes, si fueran desarrolladores de esta aplicación y esta aplicación estuviera utilizando React 17, ¿cómo intentarían resolver esto? Hay varias soluciones aquí, ¿qué intentarían? ¿Perdón? Desbalanceo.

3. Mejorando el rendimiento con React 18

Short description:

El desequilibrio, el throttling, el DLS virtualizado, React Memo, la optimización de componentes, la virtualización de la lista y las actualizaciones no urgentes de React 18 son todas soluciones para mejorar el rendimiento. Con React 18, las actualizaciones pueden tener una prioridad y las actualizaciones no urgentes no bloquean la aplicación. Volvamos al código. El componente de la lista de nodos controla los campos de entrada y los botones de filtro. Las actualizaciones se consideran urgentes de forma predeterminada, pero se pueden hacer no urgentes utilizando las API de rendimiento de React.

El desequilibrio, el throttling, sí. Oh, es realmente difícil escuchar desde aquí. DLS virtualizado, sí, otra gran solución. ¿Alguna otra idea? Bien, sí, hay varias cosas que podríamos intentar aquí. Podríamos intentar usar React Memo si los componentes se renderizan innecesariamente. Podríamos intentar optimizar los propios componentes, tal vez los componentes sean costosos por alguna razón, podríamos intentar virtualizar la lista para renderizar solo los elementos que son visibles en la pantalla, podríamos intentar desequilibrar o throttling, y todas estas son soluciones geniales e incluso se pueden combinar, pero lo que React 18 hace es introducir otra solución en la mezcla, haciendo que las actualizaciones no sean urgentes.

¿Qué significa esto? Entonces, con React 17 y versiones anteriores, cada actualización que ocurre en la aplicación se considera urgente. Si haces clic en un botón, React tiene que manejar esa actualización de inmediato. Si escribes en el campo de entrada del filtro, React tiene que renderizar la lista de nodos de inmediato. Con React 18, tu actualización ahora puede tener una prioridad. Cada actualización que realices en la aplicación sigue siendo urgente de forma predeterminada, pero lo que React ahora también admite son actualizaciones no urgentes, y las actualizaciones no urgentes no bloquean la aplicación sin importar cuánto tiempo lleven. Veamos cómo funciona esto. Ten paciencia. Perdí mi ratón. Aquí está mi ratón. Oh no, sí.

Entonces, volvamos al código. Volvamos al ratón principal. Es un poco confuso, si pongo mi ratón aquí, o como esta demostración, también se duplica allí, así que nunca puedo saber dónde está el ratón. De todos modos, veamos el código. Este es el código de la aplicación que tenemos aquí. Este es el código de este componente de lista de nodos que tenemos a la izquierda. En el componente de lista de nodos, tenemos los campos de entrada del filtro y la lista de botones. Entonces, aquí está el campo de entrada del filtro que tenemos en la interfaz de la aplicación, y aquí está la lista de botones. Todo este diseño de interfaz de usuario está controlado por el único campo de estado del filtro. Cada vez que escribo en el campo, este campo de filtro se actualiza y la interfaz de usuario se vuelve a renderizar. Ahora, esta actualización, de forma predeterminada, se considera urgente. Para hacer que una actualización no sea urgente, lo que debo hacer es usar una de las tres nuevas API de rendimiento de React, React start transition, React use transition hook o React use the first value hook. Son bastante similares. Hacen más o menos lo mismo.

4. Usando el Hook useTransition

Short description:

Me voy a centrar en el hook useTransition de React. Devuelve la bandera isPending, que indica una transición en curso, y la función startTransition, que marca las actualizaciones como no urgentes. Dividiré el estado en dos partes: filterInput para actualizaciones inmediatas y filterValue para actualizaciones no urgentes. Clonaré el hook useState para crear setFilterInput y setFilterValue. El estado filterInput controlará la entrada, mientras que el estado filterValue controlará la lista de nodos. Pasaré estos estados correspondientemente y los actualizaré usando los hooks setState.

Así que me voy a centrar solo en el segundo, useTransition. Y esto es lo que voy a hacer. Primero, voy a ir hasta arriba del todo e importar el hook useTransition de React. Segundo, voy a llamar a este hook useTransition en el código, y el hook useTransition devuelve dos valores. No, GitHub Copilot, estás equivocado. Devuelve la bandera isPending, que indica que hay una transición en curso, y devuelve la función startTransition, que te permite marcar algunas actualizaciones como no urgentes. Luego, el tercer cambio que voy a hacer es, y ten paciencia, voy a tomar este fragmento de estado y lo voy a dividir en dos fragmentos de estado. Oh, no, botones equivocados. Si te fijas en este filtro, notarás que controla dos partes de la interfaz de usuario, ¿verdad? Controla el filtro que tenemos aquí y controla la lista de nodos que tenemos aquí. Entonces, lo que sucede con este fragmento de estado es que... O lo que sucede con esta interfaz de usuario es que una parte de esta interfaz de usuario es una parte que queremos actualizar de inmediato, urgentemente. Es la entrada del filtro. Cuando el usuario escribe en el filtro, queremos reflejar el cambio de inmediato, queremos actualizarlo de inmediato. Pero la lista de nodos puede filtrarse con un retraso. Se puede actualizar de forma no urgente. Así que lo que voy a hacer es tomar este fragmento de estado y dividirlo en dos fragmentos de estado. Uno que se actualizará urgentemente y otro que se actualizará de forma no urgente. Así que voy a clonar el useState y llamar al primero... Llamémoslo setFilter. Perdón, llamémoslo filterInput y setFilterInput, porque controlará la entrada. Y el segundo controlará la lista de nodos, así que tal vez lo llame filterValue y setFilterValue. Ahora voy a tomar este estado de entrada del filtro y pasarlo aquí, y voy a tomar este estado de valor del filtro y pasarlo más abajo en el código. Oh no, espera, esto, esto, esto. Oh sí, y el de arriba. Pegar aquí, pegar aquí. Listo. Y ahora también necesito actualizar estos estados, ¿verdad? Antes tenía un solo hook setState. Ahora voy a tener dos, así que solo voy a value, bien, eso fue, eso fue un spoiler de GitHub Copilot. setFilterValue. Value, sí.

5. Mejorando el rendimiento de la aplicación con actualizaciones no urgentes

Short description:

Entonces, dividimos el estado en dos fragmentos de estado. Sin embargo, la aplicación todavía se retrasa al escribir en el filtro. Para solucionar esto, marcamos la llamada a setFilterValue como no urgente envolviéndola con StartTransition. Ahora, la lista de nodos se actualiza sin congelarse, lo que permite una interacción continua del usuario.

Entonces, y el corchete de cierre. Lo que hicimos hasta ahora es prácticamente nada. Lo único que hicimos hasta ahora es tomar este fragmento de estado y dividirlo en dos fragmentos de estado. Y eso, bueno, todavía no tiene mucho sentido.

Entonces, si intento escribir en el filtro, notarás que, como, todavía es lento. Todavía se retrasa, ¿verdad? Presiono F y el cubo de hielo se retrasa, como si las cosas giraran durante un segundo. Pero eso se debe a que ambas actualizaciones de estado siguen siendo urgentes.

Ahora voy a hacer un último cambio. Voy a tomar mi hook setFilterValue y lo voy a marcar, la llamada a setFilterValue, y lo voy a marcar como no urgente. Y voy a hacer esto envolviéndolo con StartTransition. Y así, mira, el único cambio que hice, envolví el estado del filtro con StartTransition. Y ahora, si intento escribir en el filtro, notarás que la lista de nodos todavía se actualiza, pero la aplicación no se congela en absoluto, los cubos de hielo siguen girando sin interrupciones todo el tiempo. Es mucho mejor.

6. Renderizado Concurrente de React y Desventajas

Short description:

Puedo escribir tanto como quiera y se actualiza perfectamente. Es como magia. Es genial. ¿Alguien puede adivinar cómo funciona esto? La forma en que funciona es devolviendo el control. React comienza a renderizar la aplicación y luego devuelve el control al navegador después de cada fotograma. En DevTools, este era el comportamiento antiguo. Presioné el botón del teclado y el hilo principal se bloqueó durante 500 milisegundos. Pero si amplío ese pico, veré que mi tecla se percibió cuando escribí la letra F, ahora solo tarda 15 milisegundos y aquí React realiza la actualización inmediata, sin importar cuándo ocurra el clic. Así es como funciona el renderizado concurrente de React 18 y así es como funciona internamente. Ahora, hablemos de las desventajas porque, por supuesto, no hay almuerzo gratis. La primera desventaja es que las actualizaciones no urgentes tardan más. React tiene que ceder el control al navegador todo el tiempo y eso introduce algunos retrasos.

Puedo escribir tanto como quiera y se actualiza perfectamente. Es como magia. Es genial. ¿Alguien puede adivinar cómo funciona esto? ¿Cómo lo hace React, lo sabes o estás adivinando? ¿Promesa? ¿No? Tal vez en esa dirección. Adelante. Diría que simplemente lo encola y cada vez que está libre hace algo y luego vuelve a girar de nuevo. Pero ¿notaste que los cubos de hielo siguieron girando todo el tiempo? Cuando haces algo, cuando haces clic en algo de inmediato, por lo que cada vez que React lo permite hacerlo, ejecutará esa fase de código. Más o menos sí, pero... Es solo una suposición. Sí, sí, está bien, sí. ¿Alguna otra idea? Lo siento por los oyentes en vivo, esta es probablemente la parte aburrida. Adelante, sí. ¿Está sentado? ¿Sentado? Es una parte, pero no. Entonces, la forma en que funciona es... Lo siento, diapositiva equivocada. La forma en que funciona es devolviendo el control. Entonces, lo que hace React es comenzar a renderizar la aplicación y luego devolver el control al navegador después de cada fotograma. Veamos cómo se ve esto en DevTools. Entonces, en DevTools, este era el comportamiento antiguo, ¿verdad? Presioné el botón del teclado y el hilo principal se bloqueó durante 500 milisegundos. React comenzó a renderizar y React siguió renderizando durante 500 milisegundos. Entonces, lo que React va a hacer ahora, o lo que React está haciendo ahora es si escribo cualquier letra y luego detengo la grabación y veo qué sucede, aún notaré un solo pico de actividad de la CPU, ¿verdad, en la parte superior? Pero si amplío ese pico, veré que mi tecla se percibió cuando escribí la letra F, ahora solo tarda 15 milisegundos y aquí React realiza la actualización urgente de inmediato, sin importar cuándo ocurra el clic, porque cada actualización no urgente bloqueará típicamente el hilo principal solo durante cinco o 10 milisegundos. Así es como funciona el renderizado concurrente de React 18 y así es como funciona internamente. Ahora, hablemos de las desventajas porque, por supuesto, no hay almuerzo gratis. La primera desventaja es que las actualizaciones no urgentes tardan más. React tiene que ceder el control al navegador todo el tiempo y eso introduce algunos retrasos. Entonces, si vuelvo al navegador, no voy a reproducir eso ahora, pero simplemente tomé esta aplicación y hice la grabación con start transition y sin start transition. Entonces, en el caso sin start transition, cuando estaba grabando hace una hora, este evento de presionar tecla tardó 473 milisegundos en renderizarse y bloqueó el hilo principal durante todo ese tiempo. Cuando agregué start transition, el hilo principal dejó de bloquearse, pero toda la actualización, como renderizar todos los componentes, tardó más. Tomó, ¿puedes verlo? 582 milisegundos.

7. Desventajas del Renderizado Concurrente de React

Short description:

El renderizado concurrente de React es más lento para las actualizaciones no urgentes, más costoso en términos de CPU para todas las actualizaciones y no ayuda con los componentes costosos. Sin embargo, si estás dispuesto a lidiar con estas desventajas, obtendrás un comportamiento casi mágico al renderizar algo enorme sin ralentizar la página.

Así que 100 milisegundos más largo. Este sobrecosto no es constante, depende de cuántos componentes estés renderizando, no lo sé, etc. No es como si fuera 100 milisegundos más largo cada vez, o un 20% más largo, pero lo que ves aquí es porque React tiene que devolver el control al navegador cada vez, la actualización completa termina más tarde. Tal vez eso esté bien porque se marca como no urgente, pero es una desventaja a tener en cuenta.

La segunda desventaja es que esta complejidad adicional no es gratuita. Para hacer posible el renderizado concurrente, React tuvo que hacer su arquitectura mucho más compleja. Introdujo React Fiber, que por cierto, la próxima charla en ese escenario hablará sobre eso. Échale un vistazo. Introdujo comprobaciones de renderizado concurrente. Todo esto tiene un costo en la CPU, y de hecho, esta es una de las razones por las que Vue y Preact se niegan rotundamente a implementar algo similar al renderizado concurrente. Tanto Vue como Preact creen que es poco probable que las aplicaciones del mundo real se beneficien de las características concurrentes. Como Marvin de Preact, por ejemplo, dice, todavía está en el aire si el modo concurrente es algo que beneficiará a las aplicaciones, incluso para React. O Evan de Vue dice que la demostración que el equipo de React mostró es tan forzada que es muy poco probable que ocurra en una aplicación real. Y estoy mostrando capturas de pantalla de 2019 y 2020, pero según las conversaciones en Twitter, nada ha cambiado desde entonces.

Ahora, el equipo de React, sin embargo, parece tener una visión a largo plazo y es explícito al respecto. No estoy seguro si todavía está en Twitter porque allí es donde vive toda la verdadera documentación en estos días, pero Dan, por ejemplo, en este tweet dice que esto desbloquea muchas capacidades que antes no eran posibles. El reparto de tiempo es solo una bonificación agradable. Y una de las cosas que las características concurrentes desbloquearán es la próxima API fuera de pantalla, que permite renderizar partes invisibles de la interfaz de usuario en segundo plano, y requiere el renderizado concurrente para funcionar, para no bloquear el renderizado cuando está renderizando, renderizando, renderizando. De todos modos, hay otra desventaja o trampa. El renderizado concurrente de React no ayuda a optimizar los componentes costosos. Si observas de nuevo el bucle de renderizado principal de React, notarás que debe ceder el control a esta función que verifica si React debe devolver el control al navegador, solo se llama después de cada renderizado, ¿verdad? Entonces, como la función de realizar la unidad de trabajo, toma un componente. Comienza a renderizarlo. Y solo una vez que ese renderizado está completo, debe ceder el control a las comprobaciones del host para verificar si React debe devolver el control al navegador. Entonces, si algún componente individual tarda, por ejemplo, no cinco sino 500 milisegundos en renderizarse, el hilo principal seguirá bloqueado durante los 500 milisegundos completos, incluso a pesar de que esta actualización esté marcada como no urgente. Y esta es la tercera desventaja del renderizado concurrente de React. Desventaja o trampa. En resumen, el renderizado concurrente de React es más lento para las actualizaciones no urgentes. Es más costoso en términos de CPU para todas las actualizaciones. No ayuda con los componentes costosos, pero si estás dispuesto a lidiar con todas estas desventajas y trampas, obtendrás este comportamiento casi mágico de renderizar algo enorme sin ralentizar la página en absoluto. ¿Es esto un meme? Tal vez esto sea un meme.

8. Identificación de la necesidad de useTransition en React

Short description:

Si tu aplicación es lenta y hay múltiples componentes pequeños que causan la lentitud, utiliza useTransition. Funciona de manera similar al throttling o bouncing, pero sin retrasos en el renderizado.

Gracias. Bien, tenemos algunas preguntas. Sí. Primero, ¿cómo puedo saber o juzgar si necesito usar useTransition? ¿Cuáles son algunas señales o indicios en los que deberías fijarte? Buena pregunta. Aún no tengo una intuición clara al respecto. Pero voy a intentar responder. Si tu aplicación es lenta y ves que no se debe a un solo componente costoso, sino a un montón de componentes pequeños, que es lo que suele ocurrir. Y sabes que puedes retrasar algunas partes de la interfaz de usuario, entonces deberías usarlo o en realidad una mejor opción sería useTransition. Así que si estás pensando en utilizar throttling o bouncing, prueba primero startTransition, porque funciona de manera muy similar pero es mejor porque no retrasa nada. No retrasa el renderizado por uno o dos segundos. Genial.

QnA

Actualizaciones, Cancelaciones y APIs en Bibliotecas

Short description:

¿Por qué las actualizaciones dan resultados incompletos e inesperados al escribir pruebas? ¿Cómo se cancelan las actualizaciones obsoletas? ¿Cómo puedes beneficiarte de estas APIs si tu actualización no urgente ocurre en una biblioteca, como React Query, por ejemplo?

Gracias. ¿Por qué las actualizaciones dan resultados incompletos e inesperados al escribir pruebas? Por ejemplo, ¿hay algún escenario en el que estés haciendo pruebas automatizadas y esperas que algo suceda en la pantalla, tal vez en un tick? No lo sé... Sí, no sé. Supongo que las buenas pruebas, generalmente esperan a que aparezca un elemento en la pantalla. Eso no afectará a estas pruebas. Sí, si hay pruebas que utilizan el temporizador, supongo que eso podría afectarlas un poco. Sí, es cierto.

Espera. Siguiente. Veamos. Demasiadas preguntas. ¿Cómo se cancelan las actualizaciones obsoletas? Entonces, si tienes varias... OK, sí. Esa es una gran pregunta. Entonces, React simplemente las cancela. No recuerdo los detalles exactos. Pero si escribo F y React comienza a renderizar esta enorme lista de notas, y luego 100 milisegundos después escribo otra letra, entonces React simplemente descartará el primer renderizado que se ha iniciado. Comenzará a renderizar el segundo renderizado. Así que es inteligente, es bueno en eso, simplemente detiene el trabajo tan pronto como puede. Genial.

¿Cómo puedes beneficiarte de estas APIs si tu actualización no urgente ocurre en una biblioteca, como React Query, por ejemplo? ¿Perdón? ¿Cómo puedes usar estas APIs si la... Actualización urgente ocurre? En, por ejemplo, una biblioteca, en React Query, por ejemplo. Esa es una buena pregunta. Entonces no lo sé. La próxima API que necesitas envolver, como cualquier función que cambie el estado, necesitas envolverla con startTransition. No tiene que ser exactamente esta función de retorno de estado, podría ser 10 capas de funciones intermedias. Pero si React Query... No he usado React Query. Entonces, si React Query te proporciona alguna devolución de llamada que cambia el estado, que podrías envolver con eso, entonces está bien. Si modifica el estado internamente, entonces no.

Using Deferred APIs and Handling Urgent Updates

Short description:

Echa un vistazo a useDeferredWidgetHook y useDeferredValue como APIs alternativas. Bibliotecas como React Query no manejan automáticamente actualizaciones urgentes o no urgentes. Si ocurre una actualización urgente mientras las actualizaciones no urgentes están en la cola, React priorizará la actualización urgente. Si la actualización urgente afecta al estado no urgente, React volverá a renderizar el estado no urgente desde cero. Si afecta a otras partes de la interfaz de usuario, React continuará desde donde se quedó. ¡Gracias por tenerme!

También echa un vistazo a useDeferredWidgetHook, porque es una API diferente, y si no puedes hacer una transición, tal vez useDeferredValue te ayude. Sí. ¿Conoces alguna biblioteca que esté implementando esto internamente? Por ejemplo, ¿hay banderas en React Query que puedas instruir a React Query para que haga lo correcto automáticamente para ciertos conjuntos de datos? Realmente no lo sé, y creo que la razón de esto, hay una buena razón para esto, la biblioteca no sabe qué partes de la interfaz de usuario son urgentes o no urgentes. Depende de ti, del desarrollador de la aplicación. Cierto.

De acuerdo. ¿Qué sucede si llega una actualización urgente mientras las actualizaciones no urgentes aún están en la cola? También es genial, sí. Entonces, una actualización urgente se detendrá. React ejecutará la actualización urgente de inmediato. Y luego, en realidad, no estoy seguro, creo que, entonces, no me cites en esto, pero, mi comprensión es que si la actualización urgente cambia el estado no urgente, entonces React comenzará a renderizar el estado no urgente desde cero. Si afecta a alguna otra parte de la interfaz de usuario, entonces React simplemente continuará desde donde lo dejó. Creo, no me cites en esto, pero creo que así es como funciona. Genial. Gracias. Lo tuitearé de inmediato. Dijiste esto. De acuerdo.

Creo que todas las demás preguntas aquí ya están respondidas. Así que eso es todo. Muchas gracias. Gracias por tenerme. Sí, disfruta tu día y nos vemos luego.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn