Concurrencia en React, Explicada

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Spanish audio is available in the player settings
Bookmark
Rate this content

¡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

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

FAQ

Pasaron 1,489 días entre la primera revisión de Time Slicing y el lanzamiento de Direct18.

El concurrent rendering es una característica de React que incluye hooks como useTransition y useDefaultValue, y mejoras en suspense e hidratación, permitiendo optimizaciones en la renderización de componentes.

El hook useTransition en React permite marcar algunas actualizaciones como no urgentes, optimizando así el rendimiento de la aplicación al no bloquear la interfaz de usuario durante procesos intensivos.

React 18 introduce actualizaciones no urgentes, lo cual permite que las actualizaciones que no requieren una respuesta inmediata se procesen de manera que no bloqueen la aplicación, a diferencia de versiones anteriores donde cada actualización se consideraba urgente.

Las actualizaciones no urgentes en React 18 pueden introducir ciertos retrasos ya que React debe ceder el control al navegador con frecuencia, pero evitan que el hilo principal se bloquee, permitiendo que la interfaz de usuario permanezca responsive.

El concurrent rendering hace que la arquitectura de React sea más compleja y puede ser más lento para las actualizaciones no urgentes. Además, no ayuda a optimizar componentes individualmente costosos.

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: React Concurrency, Explained

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.