Concurrencia en React, Explicada

Rate this content
Bookmark

¡React 18! ¡Funciones concurrentes! Tal vez 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 características 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 torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar

Ivan Akulov
Ivan Akulov
23 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El renderizado concurrente de React 18, específicamente el hook useTransition, optimiza el rendimiento de la aplicación al permitir que las actualizaciones no urgentes se procesen sin congelar la UI. Sin embargo, hay desventajas como un tiempo de procesamiento más largo para actualizaciones no urgentes y un aumento del uso de la CPU. El hook 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. Las bibliotecas como React Query pueden requerir el uso de APIs alternativas para manejar de manera efectiva las actualizaciones urgentes y no urgentes.

Available in English

1. Introducción a la Renderización Concurrente

Short description:

¡1,489 días! Este 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 un montón de cambios de marca, varios cambios de API, y hoy se conoce como renderización concurrente. Ahora, la renderización concurrente generalmente incluye dos características. Hooks como useTransition y useDefaultValue y mejoras en suspense e hidratación. También hay una tercera característica de rendimiento que Direct18 lanzó, mejor agrupación de actualizaciones, pero no es parte de la concurrencia. Así que cuando primero intenté 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 a ustedes lo que realmente sucede en la aplicación cada vez que usas 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 vamos a sumergirnos en useTransition, useDefaultValue hooks, y para mostrarlos, déjame mostrarte una aplicación lenta.

¡1,489 días! Este 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 un montón de cambios de marca, varios cambios de API, y hoy se conoce como concurrent rendering.

Ahora, concurrent rendering generalmente incluye dos características. Hooks como useTransition y useDefaultValue y mejoras en suspense e hidratación. También hay una tercera performance característica que Direct18 lanzó, mejor agrupación de actualizaciones, pero no es parte de concurrency.

Así que cuando primero intenté trabajar con estas concurrent características, 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 a ustedes lo que realmente sucede en la aplicación cada vez que usas 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 vamos a sumergirnos en useTransition, useDefaultValue hooks, y para mostrarlos, déjame mostrarte una aplicación lenta.

2. Problema de rendimiento con el filtrado 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, causando 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 una cantidad significativa de tiempo en procesarse. El evento desencadena una serie de llamadas a funciones de React, lo que resulta en la renderización de múltiples componentes. Este proceso de re-renderización es una operación de detener el mundo, causando retrasos en la interacción del usuario. Para abordar 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. ¡Vaya! ¡Espera! ¡Oh, no! Yo—Yo, espera. Lo siento. Yo— Esto. Sí. ¡Ah! Sí, hemos vuelto. Entonces, esta es una aplicación básica de toma de notas, y tiene una lista de nodos que puedes filtrar. Y si intentas filtrar estos nodos, la aplicación se ralentizará. Puedes notarlo si miras 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, algo así 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 un segundo o dos. Si intento escribir más, podrías ver cómo la aplicación simplemente se retrasa mientras estoy escribiendo. Entonces realmente no puedes sentirlo, porque estoy escribiendo detrás del teclado. Pero podrías ver cómo estoy escribiendo, y la aplicación se siente realmente, realmente lenta. Las actualizaciones de la UI, ocurren con retraso, y la aplicación simplemente se congela durante un segundo o dos.

Entonces, ahora, cada vez que tengo un problema de performance, lo que me gusta hacer es abrir DevTools Profiler, DevTools Performance, e intentar grabar lo que está sucediendo en la aplicación con el panel de performance. Entonces, en este caso, si hago clic en grabar, e intento escribir, y detengo la grabación, veré que lo que está sucediendo en la aplicación es que tengo este enorme pico de actividad de la CPU de 500ms, y si amplío ese pico de actividad de la CPU, veré que tengo un solo evento keydown que tarda 550ms en procesarse, y debajo de ese evento, hay un montón de llamadas a funciones de React.

Entonces, ahora, si intentara debug esto un poco más a fondo e intentara averiguar qué está pasando, vería esto. Entonces, aquí está lo que sucede en la aplicación. Lo que sucede es que estoy escribiendo en el campo de texto, los inputs de filtro, eso llama a esta función set filter que es solo un hook 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 como tenemos muchos componentes, muchos botones de nodos, eso lleva un tiempo. Entonces, este re-renderizado es una operación de detener el mundo. Nada puede suceder hasta que React termine. Si un usuario intenta interactuar con la aplicación de cualquier manera, tendrá que esperar hasta que el re-renderizado termine. Si el re-renderizado de la aplicación tarda dos segundos, el usuario tendrá que esperar dos segundos. Así es como funciona React 17, React 16, incluso React 18 funciona de serie. Un comportamiento de bloqueo de JavaScript bastante estándar.

Ahora, retrocedamos un paso. Tenemos un problema de performance, ¿verdad? Estoy escribiendo en el campo de texto, y ese campo de texto va a una lista de nodos para re-renderizar, y este re-renderizado es bloqueante y costoso, lo que ralentiza la aplicación y ralentiza todo el proceso de escritura. Entonces, mi pregunta para ustedes, si fueran los desarrolladores de esta aplicación, y esta aplicación estuviera usando React 17, ¿cómo intentarían resolver esto? Hay múltiples soluciones aquí, ¿qué intentarían? ¿Perdón? De-balanceo.

3. Mejorando el Rendimiento con React 18

Short description:

El desbalanceo, 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 inputs de filtro y los botones. Las actualizaciones se consideran urgentes por defecto, pero pueden hacerse no urgentes utilizando las APIs de rendimiento de React.

Desbalanceo, throttling, sí. Oh, es realmente difícil escuchar desde aquí. DLS virtualizado, sí, otra gran solución. ¿Alguna otra idea? Bien, entonces 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 componentes en sí, tal vez los componentes son 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 desbalancear o hacer throttling, y todas estas son excelentes soluciones e incluso puedes combinarlas, pero lo que React 18 hace es que introduce otra solución a 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 inmediatamente. Si escribes en el input de filtro, React tiene que renderizar la lista de nodos inmediatamente. Con React 18, tu actualización ahora puede tener una prioridad. Cada actualización que haces en la aplicación todavía es por defecto urgente, pero lo que React ahora también soporta son actualizaciones no urgentes, y las actualizaciones no urgentes casi mágicamente no bloquean la aplicación sin importar cuánto tiempo tomen. Veamos cómo funciona esto. Tengan paciencia conmigo. Perdí mi ratón. Aquí está mi ratón. Oh no, sí.

Entonces, volvamos al code. 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 sé dónde está el ratón. De todos modos, entonces, miremos el code. Este es el code de la aplicación que tenemos aquí. Este es el code de este componente de la lista de nodos que tenemos a la izquierda. En el componente de la lista de nodos, tenemos los inputs de filtro, y tenemos la lista de botones. Así que aquí está el input de filtro que tenemos en la UI de la aplicación, y aquí está la lista de botones. Toda esta UI está controlada por el único campo de estado de filtro. Cada vez que escribo en el campo, este campo de filtro se actualiza, y la UI se vuelve a ingresar. Ahora, esta actualización, por defecto, se considera urgente. Para hacer una actualización no urgente, lo que necesito hacer es usar una de las tres nuevas APIs de rendimiento de React, React start transition, React use transition hook, o React use the first value hook. Todas son bastante similares. Hacen más o menos lo mismo.

4. Uso del Hook useTransition

Short description:

Voy a centrarme en el hook use transition de React. Devuelve el indicador is pending, que indica una transición en curso, y la función start transition, que marca las actualizaciones como no urgentes. Dividiré el estado en dos partes: filterInput para actualizaciones inmediatas y filterValue para actualizaciones no urgentes. Clonando el hook useState, crearé setFilterInput y setFilterValue. El estado de filter input controlará el input, mientras que el estado de filter value controlará la lista de nodos. Pasaré estos estados en consecuencia y los actualizaré utilizando los hooks de set state.

Entonces, me voy a centrar solo en el segundo, use transition. Y esto es lo que voy a hacer. Primero, voy a ir a la parte superior e importar el hook use transition de React. Segundo, voy a llamar a este hook use transition en el código, y el hook use transition devuelve dos valores. No, GitHub copilot, estás equivocado. Devuelve el indicador is pending, que indica que la transición está en curso, y devuelve la función, start transition, que te permite marcar algunas actualizaciones como no urgentes. Luego, el tercer cambio que voy a hacer es, y ten paciencia conmigo, voy a tomar este pedazo de estado, y lo voy a dividir en dos partes de estado. Oh, no, botones equivocados. Si miras este filtro, notarás que controla dos partes de la UI, ¿verdad? Controla el filtro que tenemos aquí, y controla la lista de nodos que tenemos aquí. Así que lo que pasa con este pedazo de estado es que ... O lo que pasa con esta UI es que una parte de esta UI es una parte de la UI que queremos actualizar inmediatamente, con urgencia. Es el filtro de entrada. Como cuando el usuario está escribiendo en el filtro, queremos reflejar el cambio inmediatamente, queremos actualizarlo inmediatamente. Pero la lista de nodos puede ser filtrada con un retraso. Puede ser actualizada de forma no urgente. Así que lo que voy a hacer es que voy a tomar este pedazo de estado y lo voy a dividir en dos partes de estado. Una que se va a actualizar con urgencia, y otra que se va a actualizar de forma no urgente. Entonces voy a clonar el use state y llamar al primero ... Llamémoslo setFilter. Lo siento, llamémoslo filterInput y setFilterInput, porque va a controlar el input. Y el segundo va a controlar la lista de nodos, así que tal vez lo llame filterValue y setFilterValue. Ahora voy a tomar este estado de filter input y lo voy a pasar aquí, y voy a tomar este estado de filter value y lo voy a pasar más abajo en el código. Oh no, espera, esto, esto, esto. Oh sí, y el de arriba. Pega aquí, pega aquí. Hecho. Y ahora también necesito actualizar estos estados, ¿verdad? Así que antes tenía, tenía como un hook de set state. Ahora voy a tener dos, así que solo voy a valorar, okay, eso fue, eso fue un spoiler de GitHub quality. SetFilterValue. Valor, sí.

5. Mejorando el Rendimiento de la Aplicación con Actualizaciones No Urgentes

Short description:

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

Entonces, y el corchete de cierre. Así que lo que hicimos aquí hasta ahora es que, hicimos, como, prácticamente nada. Como, el único cambio que hicimos hasta ahora es que tomamos este bit de estado y lo dividimos en dos bits de estado. Y eso es bastante, bueno, no tiene, no tiene sentido todavía.

Entonces, si intento escribir en el filtro, notarás que, como, todavía, todavía es lento. Todavía se está retrasando, ¿verdad? Estoy presionando F y el IceCube se retrasa, como que las cosas giran durante un segundo. Pero eso es porque ambas actualizaciones de estado siguen siendo urgentes.

Así que lo que voy a hacer ahora es que voy a hacer un último cambio. Voy a tomar mi hook setFilterValue y voy a marcarlo, la llamada setFilterValue, y voy a marcarla como no urgente. Y voy a hacer esto envolviéndola con StartTransition. Y entonces, 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 cubitos de hielo siguen girando ininterrumpidamente todo el tiempo. Es batterithmost.

6. El Renderizado Concurrente de React y sus Desventajas

Short description:

Puedo escribir todo lo que quiera y se actualiza perfectamente. Entonces, es como magia. Es genial. ¿Alguien podría adivinar cómo funciona esto? La forma en que esto funciona es devolviendo el control. Entonces, lo que hace React es comenzar a renderizar la aplicación, y luego devuelve el control al navegador después de cada fotograma. En DevTools, este era el comportamiento antiguo, ¿verdad? Presioné el botón del teclado, y el hilo principal estuvo bloqueado durante 500 milisegundos. Pero si hago zoom en ese pico, veré que mi tecla percibida cuando eso sucedió cuando escribí la letra F, ahora solo toma 15 milisegundos, y aquí React realiza la actualización Argent de inmediato, sin importar cuándo sucede el clic. Así es como funciona el renderizado concurrente de React 18 y así es como funciona bajo el capó. Ahora, hablemos de las desventajas porque, por supuesto, no hay almuerzo gratis. La primera desventaja es que las actualizaciones no Argent tardan más. React tiene que ceder el control al navegador todo el tiempo y eso introduce algunos retrasos.

Puedo escribir todo lo que quiera y se actualiza perfectamente. Entonces, es como magia. Es genial. ¿Alguien podría adivinar cómo funciona esto? ¿Cómo hace React esto, sabes o estás adivinando? ¿Promesa? ¿No? Tal vez en esa dirección. Adelante. Diría que simplemente lo encola y cuando está libre hace algo y luego gira de nuevo. ¿Pero notaste que los cubitos de hielo siguieron girando todo el tiempo? Cuando haces algo, cuando haces clic en algo de inmediato, así que cuando React atenúa, es capaz de hacerlo, ejecutará esa fase de code. Más o menos sí, pero... Es solo una suposición. Sí, sí, está bien, sí. ¿Alguna otra idea? Lamento 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 esto funciona es... Lo siento, diapositiva equivocada. La forma en que esto funciona es devolviendo el control. Entonces, lo que hace React es comenzar a renderizar la aplicación, y luego devuelve 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 estuvo bloqueado 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 una sola letra, y luego dejo de grabar, y veo qué pasa, todavía notaría un solo pico de la actividad de la CPU, ¿verdad, en la parte superior? Pero si hago zoom en ese pico, veré que mi tecla percibida cuando eso sucedió cuando escribí la letra F, ahora solo toma 15 milisegundos, y aquí React realiza la actualización Argent de inmediato, sin importar cuándo sucede el clic, porque todas las actualizaciones no Argent normalmente estarán bloqueando el hilo principal solo durante cinco o 10 milisegundos. Así es como funciona el renderizado concurrente de React 18 y así es como funciona bajo el capó. Ahora, hablemos de las desventajas porque, por supuesto, no hay almuerzo gratis. La primera desventaja es que las actualizaciones no Argent 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 e hice la grabación con start transition y sin start transition. Entonces, en el caso sin start transition, cuando estaba grabándolo hace una hora, este evento de presión de tecla tardó 473 milisegundos en renderizar, y bloqueó el hilo principal todo el tiempo. Cuando agregué start transition, los hilos principales dejaron de estar bloqueados, pero toda la actualización, como renderizar todos los componentes, tardó más. Lo tomó, ¿puedes verlo? 582 milisegundos.

7. Desventajas de la Concurrencia en React

Short description:

La concurrencia en React es más lenta para las actualizaciones no urgentes, consume más 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 el comportamiento casi mágico de renderizar algo enorme sin ralentizar la página.

Entonces, 100 milisegundos más. Así que este sobrecoste, 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 Rect tiene que devolver el control al navegador cada vez, la totalidad de la actualización termina más tarde. Quizás eso está bien porque se marca como no urgente, pero es una desventaja a tener en cuenta.

La segunda desventaja es que esta complejidad extra no es gratuita. Para hacer posible el concurrent rendering, Rect tuvo que hacer su architecture mucho más compleja. Introdujo RectFiber, que por cierto, la próxima charla en ese escenario va a hablar sobre ello. Ve a verlo. Introdujo las comprobaciones de concurrent rendering. 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 concurrent rendering. Tanto Vue como Preact creen que es poco probable que las aplicaciones del mundo real se beneficien de las características concurrent. Como Marvin de Preact, por ejemplo, dice, todavía está en el aire si el modo concurrent es algo que beneficiará a las aplicaciones en absoluto, incluso para React. O Evan de Vue dice, la demostración del equipo de Rect, es tan forzada que es muy probable que nunca ocurra en la aplicación real. Y estoy mostrando capturas de pantalla de 2019 y 2020, pero basado en las conversaciones de Twitter, nada ha cambiado desde entonces.

Ahora, el equipo de React, sin embargo, parece jugar a largo plazo y es explícito al respecto. No estoy seguro de si todavía está en Twitter porque ahí es donde vive toda la documentation real hoy en día pero Dan, por ejemplo, en este tweet dice, esto desbloquea muchas habilidades que no eran posibles. El time slicing es solo un bonito bonus. Y una de las cosas que las características concurrent desbloquearán es la próxima API fuera de pantalla que permite renderizar partes invisibles de la UI en segundo plano, y requiere concurrent rendering para funcionar, para no bloquear el renderizado cuando está renderizando, renderizando, renderizando. De todos modos, hay otra desventaja / trampa. La concurrency de React no ayuda a optimizar los componentes costosos. Si miras de nuevo el bucle principal de renderizado de React, notarás que should yield al host es esta función que comprueba si React tiene que devolver el control al navegador, sólo se llama después de cada renderizado, ¿verdad? Así que como la función performing unit of work, toma un componente. Comienza a renderizarlo. Y luego sólo una vez que ese renderizado está completo, should yield to host comprueba si React debería devolver el control al navegador. Así que si cualquier componente individual tarda, por ejemplo, no cinco sino 500 milisegundos en renderizar, el hilo principal seguirá estando 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 de la concurrency de React. Desventaja / trampa. Así que para resumir, la concurrency de React es más lenta para las actualizaciones no urgentes. Es más costosa 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 y no ralentizar la página en absoluto. ¿Es esto un meme? Quizás esto es un meme.

8. Identificando la Necesidad de useTransition en React

Short description:

Si tu aplicación es lenta y hay múltiples componentes pequeños causando la lentitud, utiliza useTransition. Funciona de manera similar al throttling o bouncing, pero sin ningún retraso en la renderización.

Gracias. Bueno, tenemos algunas preguntas. Sí. Primero, ¿cómo puedo saber o juzgar que necesito usar useTransition? ¿Cuáles son algunas señales o signos que debería buscar? Buena pregunta. Aún no tengo una intuición clara al respecto. Pero voy a intentar responder. Si tu aplicación es lenta, y si ves que es como si intentaras ejecutar un rectProfiler y ves que no es porque haya algún componente costoso individual, sino un montón de pequeños, que es básicamente cómo sucede típicamente. Y sabes que puedes retrasar algunas partes de la UI, entonces lo usarías o en realidad una mejor transición. Así que si estás pensando en usar throttling, o bouncing, prueba primero startTransition, porque funciona prácticamente de la misma manera pero es mejor porque no retrasa nada. No retrasa la renderización ni un segundo ni dos segundos. Genial.

QnA

Actualizaciones, Cancelaciones y APIs en Bibliotecas

Short description:

¿Por qué las actualizaciones dan resultados incompletos 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 inesperados al escribir pruebas? ¿Existe un escenario aquí cuando estás realizando pruebas automatizadas y esperas que algo suceda en pantalla, tal vez en un tick? No he... Sí, no lo sé. Supongo que las buenas pruebas, normalmente esperan que un elemento aparezca en pantalla. Eso no va a afectar estas pruebas. Sí, si hay pruebas que usan el temporizador, entonces supongo que eso podría afectarlas un poco. Sí, eso es cierto.

Espera. La siguiente. Veamos. Demasiadas preguntas. ¿Cómo se cancelan las actualizaciones obsoletas? Entonces, si tienes múltiples... OK, sí. Esa es una gran pregunta. Entonces React simplemente las cancela. No recuerdo la mecánica exacta. 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 ha estado en progreso. 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, como, 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 tengas que cambia el estado, necesitas envolverla con startTransition. No tiene que ser exactamente este callback de estado, podría ser 10 capas de funciones intermedias. Pero si React Query... No he usado React Query. Entonces, si React Query te da algún callback que cambia el estado, que podrías envolver con eso, entonces eso es bueno. Si establece el estado internamente, entonces no.

Uso de APIs diferidas y manejo de actualizaciones urgentes

Short description:

Echa un vistazo a useDeferredWidgetHook y useDeferredValue como APIs alternativas. Las bibliotecas como React Query no manejan automáticamente las actualizaciones urgentes o no urgentes. Si se produce una actualización urgente mientras las actualizaciones no urgentes están en la cola, React dará prioridad a 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 UI, React continuará donde lo dejó. ¡Gracias por tenerme!

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

Vale. Entonces, ¿qué sucede si llega una actualización urgente mientras las actualizaciones no urgentes aún están en la cola? También genial, sí. Entonces se detendrá una actualización urgente. React ejecutará la actualización urgente de inmediato. Y luego, en realidad, no estoy seguro, creo que, así que, no me cites en esto, pero, mi entendimiento es, 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 UI, entonces React simplemente continuará donde lo dejó. Creo, no me cites en esto, pero creo que así es como funciona. Genial. Gracias. Voy a ir y twittearlo de inmediato. Tú dijiste esto. OK.

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

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

A Guide to React Rendering Behavior
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
Building Better Websites with Remix
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!
Don't Solve Problems, Eliminate Them
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 Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
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. 
Using useEffect Effectively
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.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
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 Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 🤐)
Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
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 Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
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, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
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