Dentro de Fiber: Una Visión General del Algoritmo de Reconciliación de React

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
Bookmark
Rate this content

Con React 16.0, Facebook ha lanzado una actualización del algoritmo de reconciliación del núcleo de React que se llamó "Fiber". Fiber permite a React romper los límites de la pila de llamadas y pausar/iniciar el trabajo de renderizado a voluntad.


En esta charla, exploraremos por qué era necesario Fiber, cubriremos algunos detalles de implementación internos de Fiber y veremos Fiber en acción con el Modo Concurrente experimental de React.

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

FAQ

Fiber es un nuevo algoritmo de reconciliación introducido en React 16 que permite a React dividir el trabajo en unidades incrementales, pausar el trabajo y reanudarlo, asignar diferentes prioridades a diferentes tipos de trabajo y reutilizar o descartar trabajo previamente calculado.

Fiber fue introducido para superar las limitaciones del algoritmo de reconciliación anterior, que era puramente recursivo y no permitía la división de trabajo ni la gestión eficiente de las prioridades de las tareas, lo que podía causar caídas de frames y degradar la experiencia del usuario.

El algoritmo Fiber resuelve problemas relacionados con la eficiencia en el renderizado, permitiendo pausar y reanudar el trabajo de renderizado, manejar prioridades de tareas y mejorar la capacidad de respuesta de las interfaces de usuario sin bloquear el hilo principal.

El modo concurrente en React es un conjunto de características experimentales que permiten que las aplicaciones sean más receptivas y se ajusten a las capacidades del dispositivo y a la velocidad de la red. Actualmente, es experimental y no se recomienda su uso en producción, excepto en Facebook donde ya está en uso.

Un objeto Fiber es un objeto JavaScript que contiene información sobre un componente, incluyendo su entrada y salida, y corresponde a una instancia de un componente. Los objetos Fiber permiten a React gestionar el estado, las props y las prioridades de los componentes de manera más eficiente durante el proceso de reconciliación.

Fiber mejora el rendimiento al permitir que las actualizaciones de alta prioridad se procesen antes que las de baja prioridad, reduciendo así las caídas de frames y mejorando la experiencia del usuario al mantener la interfaz responsive incluso durante operaciones pesadas.

Las dos fases del algoritmo Fiber son la fase de reconciliación, que es interrumpible y permite pausar y reanudar el trabajo, y la fase de confirmación, que no es interrumpible y durante la cual React aplica los cambios al DOM o realiza llamadas a métodos del ciclo de vida.

Elad Tzemach
Elad Tzemach
20 min
14 May, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
React Fiber es un algoritmo de reconciliación introducido en React 16 para abordar los campos de entrada lentos y el renderizado pesado. El antiguo reconciliador de la pila causaba una experiencia lenta al volver a renderizar todo el subárbol inmediatamente. React Fiber resuelve esto dividiendo el trabajo en unidades incrementales y asignando prioridades. Introduce el modo concurrente para que las aplicaciones sean receptivas y adaptables. El gancho useDeferredValue se utiliza comúnmente para mantener la interfaz receptiva al renderizar componentes de inmediato y otros en un momento posterior.

1. Introducción a Fiber y Demo

Short description:

Hola, soy Elad Zamek, un desarrollador de software en Viva Systems. Hoy hablaremos sobre Fiber, el nuevo algoritmo de reconciliación de React introducido en React 16. Cubriremos lo que React tenía antes de Fiber, por qué era necesario Fiber y qué podemos lograr con él. Comencemos con una demostración rápida. Tengo una aplicación simple con un campo de entrada y una lista. Todo lo que escribo se muestra en la lista. El componente de lista espera tres milisegundos para simular una renderización pesada.

Hola a todos, mi nombre es Elad Zamek y soy un desarrollador de software en Viva Systems en Toronto, Canadá. Viva ofrece productos basados en la nube para la industria global de ciencias de la vida y actualmente trabajo allí como desarrollador de UI principal para el producto Safety AI.

Hoy hablaremos sobre Fiber, el nuevo algoritmo de reconciliación de React que se introdujo en React 16. Hablaremos sobre lo que React tenía antes de Fiber, por qué era necesario Fiber y algunas de las cosas que podemos lograr con Fiber. Tenemos mucho que cubrir, así que empecemos.

Comenzaré con una demostración rápida aquí y como pueden ver, tengo una aplicación bastante simple que tiene un campo de entrada. Todo lo que escribo en el campo de entrada se muestra. Tenemos 80 elementos en una lista que se muestra con el valor que escribimos en el campo. Si escribo mucho, obtendremos 80 elementos con el texto 'mucho'. Mi lista lenta es un componente que se renderiza. Si entramos en él, podemos ver que nos devuelve un array de 80 elementos del componente de elemento de lista, que es un componente que espera tres milisegundos y luego devuelve un elemento LI con el texto que pasamos. La razón por la que espero aquí tres milisegundos es simplemente para simular un componente que es pesado y que tarda mucho tiempo en renderizarse porque es muy complejo.

2. Laggy Input Fields and Heavy Rendering

Short description:

Cuando se escribe en el campo de entrada, hay un retraso notable antes de que el valor se renderice en la lista. Esto se debe a un componente pesado y complejo, MySOLIST, que se renderiza a medida que se escribe. Muchas aplicaciones experimentan este problema con campos de entrada lentos.

Ahora, si escribo algo en el campo de entrada, digamos que voy a escribir React conference, escribo y dejo de escribir ahora y luego puedo ver el valor en el campo de entrada y en la lista. Así que lo haré de nuevo, React conference, dejo de escribir ahora y luego lo veo. Espero que hayas notado ese retraso que tuve. Fue como de un segundo o dos, entre el momento en que terminé de escribir React conference en el campo de entrada, y el momento en que vi el valor que se estaba llenando en el campo de entrada mismo y se estaba renderizando en la lista. Y eso se debe a que cuando escribí el valor, tenía otro componente, el componente MySOLIST que se renderizaba mientras lo escribía. Y estoy seguro de que, al igual que la mayoría de ustedes al menos, han visto este tipo de problema en sus aplicaciones donde tienen un campo de entrada lento porque hay otro componente pesado y complejo que necesita ser renderizado según el valor que tienes en el campo de entrada o algo similar a eso.

3. Understanding the Laggy Experience

Short description:

Veamos nuestra aplicación y comprendamos por qué es lenta. El reconciliador de pila, utilizado en React 15 y versiones anteriores, es un algoritmo puramente recursivo. Cada vez que cambia el estado de la aplicación, se vuelve a renderizar todo el subárbol de inmediato. Esto hace que todo, incluida la lista lenta, se renderice, lo que resulta en una experiencia lenta.

Entonces veamos nuestra aplicación solo para poder entender por qué está sucediendo esto. Y lo vamos a ver en forma de un árbol conectando todos los componentes y ver qué está sucediendo. El reconciliador de pila es la implementación que impulsa a React 15 y versiones anteriores. No entraré en demasiados detalles sobre cómo funciona este algoritmo porque estamos aquí para hablar del algoritmo Fabry. Pero lo importante de saber es que, por ejemplo, el estado de la aplicación ha cambiado. React recorrerá este árbol de componentes de forma recursiva preguntando a cada componente cómo, ¿qué estás renderizando en función de ese cambio de estado? Luego, en función del resultado de la función de renderizado, creará un DOM virtual y actualizará el DOM con ese resultado. Por lo tanto, este algoritmo de reconciliación es un algoritmo puramente recursivo. Una actualización resulta en que todo el subárbol se vuelva a renderizar de inmediato. Si bien esto funciona bien, tiene algunas limitaciones. Aquí puedes ver que el elemento de entrada en azul es el que requiere una respuesta rápida para nosotros. Queremos que el usuario vea lo que escribe mientras lo escribe. Sin embargo, dado que la escritura actualiza el estado de todo el componente de la aplicación, todo se renderiza, incluida esa lista lenta en rojo y por eso todo parece tan lento.

4. Issues with Stack Reconciler

Short description:

Con el antiguo algoritmo de reconciliación, React no podía dividir el trabajo en unidades incrementales, lo que provocaba caídas de frames y degradaba la experiencia del usuario. Si React tarda más de 16 milisegundos en renderizar algo en la pantalla, el navegador descartará ese frame, lo que resulta en una experiencia lenta. JavaScript, al ser de un solo hilo, puede bloquear al navegador y afectar negativamente la experiencia del usuario.

Entonces, ¿qué es realmente lo incorrecto con este reconciliador de pila? Tengo una cita aquí de Andrew Clark, quien es uno de los miembros del equipo principal de React en Facebook. En la interfaz de usuario, no es necesario que cada actualización se aplique de inmediato. De hecho, hacerlo puede ser ineficiente y provocar caídas de frames y degradar la experiencia del usuario. Ahora, con el antiguo algoritmo de reconciliación, no podíamos dividir el trabajo en unidades incrementales. Si React iba a recorrer todo el árbol de componentes de forma síncrona y realizar el trabajo para cada componente, podría superar los 60 milisegundos disponibles para que el código de la aplicación ejecute su lógica.

Ahora, ¿qué queremos decir cuando nos referimos a 60 milisegundos y por qué es un problema con el enfoque recursivo? Bueno, típicamente, para que un video se sienta fluido e instantáneo para el ojo humano, el video debe reproducirse a una velocidad de aproximadamente 30 cuadros por segundo. Cualquier cosa por encima de eso brindará una experiencia aún mejor. Y esta es en realidad una de las principales razones por las que los jugadores prefieren una mayor frecuencia de cuadros para los juegos de disparos en primera persona donde la precisión es muy importante. Dicho esto, la mayoría de los dispositivos en estos días se refieren a sus pantallas a 60 cuadros por segundo, o en otras palabras, con 60 cuadros por segundo, se muestra un nuevo cuadro cada 16 milisegundos. Este número es muy importante porque si el renderizado de React tarda más de 16 milisegundos en renderizar algo en la pantalla, el navegador descartará ese cuadro y el usuario experimentará una experiencia lenta similar a la que vimos anteriormente. No sé si alguna vez has visto un video que se creó con 12 FPS o 10 FPS o 20 FPS, pero no es tan fluido como 30 y definitivamente no como 60 FPS.

Otra cosa importante a tener en cuenta es que JavaScript es un lenguaje de un solo hilo. Y debido a que el código de JavaScript se ejecuta en un solo hilo, solo se puede ejecutar una línea de JavaScript a la vez. El mismo hilo también es responsable de otros ciclos de vida del documento, como el diseño y la pintura. Y esto significa que cada vez que se ejecuta el código de JavaScript, el navegador se bloquea y no puede hacer nada más. Si React va a recorrer todo el árbol de componentes de forma síncrona y realizar el trabajo para cada componente, como dijimos, podría superar esos 16 milisegundos disponibles. Y como los navegadores solo tienen esos 16 milisegundos para hacer todo el trabajo, para funcionar a 60 FPS, reaccionar a cada uno de esos eventos puede bloquear por completo tu aplicación de JavaScript cuando no cumplimos con ese presupuesto de 16 milisegundos. Esencialmente, es cuando vemos que el contenido de tu aplicación web se mueve de manera entrecortada en la pantalla. A menudo se le llama tartamudeo. Nuevamente, lo que vimos en nuestra demostración. Y, por supuesto, afecta negativamente la experiencia del usuario.

5. Introducing Concurrent Mode in React

Short description:

Para hacer que React sea más rápido, necesitamos resolver dos problemas: tareas de larga duración que causan caídas de frames y diferentes tareas que tienen diferentes prioridades. La introducción del modo concurrente, una función experimental en React, ayuda a que las aplicaciones sean receptivas y se adapten a las capacidades del dispositivo. Aunque no se recomienda para producción, se está utilizando en Facebook. Consulta la documentación oficial de React para obtener más detalles.

Ahora podrías pensar, ¿por qué no hacer que React sea más rápido? Bueno, el problema en la demostración que vimos, por ejemplo, fue que en las actualizaciones, como la entrada del usuario se quedaba atrás de las actualizaciones más grandes, como el árbol de componentes complejo, esa lista lenta. Ese es código del usuario, no es parte de React en sí. Entonces, con todo lo que expliqué hasta ahora, podemos formular dos problemas que debemos resolver para obtener interfaces de usuario más receptivas. El primero es que las tareas de larga duración causan caídas de frames. Y necesitamos asegurarnos de que todas nuestras tareas sean pequeñas y se puedan completar en un par de milisegundos para poder ejecutarlas en un solo frame. Y luego el segundo es que diferentes tareas tienen diferentes prioridades. Así que introduzcamos el modo concurrente. Es experimental y es un conjunto de nuevas funciones que ayudan a que las aplicaciones de React sean receptivas y se ajusten de manera elegante a las capacidades del dispositivo del usuario y a la velocidad de la red. Debido a que es experimental, las cosas pueden cambiar. No se recomienda utilizarlo en producción por el momento, excepto en Facebook donde se utiliza en producción. Y si quieres más detalles, te recomendaría encarecidamente que consultes la documentación oficial de React.

6. Concurrency in JavaScript

Short description:

JavaScript, al ser de un solo hilo, puede bloquear el navegador impidiendo que haga cualquier otra cosa, lo que provoca problemas y afecta negativamente la experiencia del usuario.

Y acabamos de notar que JavaScript es de un solo hilo. Entonces, ¿cómo puede ser concurrente? Bueno, se trata principalmente de hilos conceptuales o, en términos más precisos, de programación cooperativa o concurrencia cooperativa. Básicamente, lo que todos estos términos elegantes significan es que una vez que se le da el control al hilo, continúa ejecutándose hasta que cede el control explícitamente o se bloquea. Entonces, ¿qué significa esto? Tomemos como ejemplo los sistemas de control de versiones. Antes de los sistemas de control de versiones, como se puede ver a la derecha, si queríamos trabajar en una función, teníamos que asegurarnos de que nadie más estuviera modificando los archivos en los que estábamos trabajando, teníamos que informar a todos que estábamos trabajando en esos archivos. Básicamente, estábamos bloqueando a todos los demás para que no hicieran cambios en esos archivos mientras los estábamos modificando. Y esto se puede considerar como un proceso síncrono. Cuando aparecieron los sistemas de control de versiones, simplemente se creaba una rama de función, se hacía el trabajo y luego se fusionaba de nuevo. Y esto se puede considerar como un proceso asíncrono.

7. React Fiber y el Hook useDeferredValue

Short description:

React Fiber permite que React aproveche la programación y priorización, permitiendo pausar y reanudar el trabajo más tarde. Asigna diferentes prioridades a diferentes tipos de trabajo y permite reutilizar o eliminar el trabajo previamente calculado. El hook useDeferredValue se utiliza comúnmente para mantener la interfaz receptiva al renderizar componentes basados en la entrada del usuario de inmediato y renderizar otros en un momento posterior. Un Fiber es un objeto JavaScript que contiene información sobre un componente, su entrada y su salida. La fase de reconciliación del algoritmo Fiber es interrumpible, lo que permite pausar y reanudar, mientras que la fase de confirmación no lo es. Durante el renderizado inicial, cada elemento de React se convierte en un Fiber y se coloca en un árbol llamado current.

Entonces, React Fiber elimina esencialmente la necesidad de procesar actualizaciones de manera recursiva y sincrónica. En cambio, permite que React aproveche la programación y priorización, lo que nos permite pausar el trabajo y reanudarlo más tarde, asignar diferentes prioridades a diferentes tipos de trabajo y reutilizar o descartar el trabajo calculado previamente. Por ejemplo, en nuestra demostración, React podría mantener el campo de entrada receptivo para el usuario, lo que significa que el usuario vería lo que está escribiendo de inmediato, ya que tendría una prioridad más alta que la lista de elementos que deben renderizarse. Luego, cuando el usuario no hace nada, es decir, no bloquea el hilo principal, React puede renderizar y mostrar esa lista de elementos.

Entonces, eso suena genial, ¿verdad? Bueno, veámoslo en acción. Esta es la misma aplicación que teníamos antes. La única diferencia es que importamos el hook useDeferredValue aquí y le pasamos la variable de estado de texto junto con un objeto con el tiempo de espera establecido en 2000 milisegundos, que es igual a dos segundos. Ahora, estamos pasando la variable de estado de texto a nuestro campo de entrada porque queremos estar actualizados con lo que estamos escribiendo, pero a MySlowList le estamos pasando esa variable de texto diferido, porque, bueno, ya lo verás. Ahora, escribiré React Conference nuevamente y realmente no puedes verlo, pero a medida que escribo, veo los caracteres que se escriben en el campo. Pero la lista se está quedando atrás en cuanto a lo que se renderiza. Lo haré de nuevo. Como puedes ver, terminé de escribir y ahora la lista se está poniendo al día lentamente en la renderización, ¿verdad?

El hook useDeferredValue envuelve un valor de prop o estado y recibe el tiempo máximo de espera diferido. Esto básicamente le dice a React que está bien que los componentes que dependen de este valor se rendericen en un momento posterior. Se utiliza comúnmente para mantener la interfaz receptiva cuando tienes algo que se renderiza de inmediato según la entrada del usuario, como en nuestra demostración aquí. Por ejemplo, con este código, básicamente decimos que necesitamos mostrar el texto en el campo de entrada tan pronto como el usuario lo escriba. Necesitamos ver exactamente lo que escriben, pero cuando se trata de la lista, está bien si tarda hasta dos segundos en ponerse al día con lo que necesita renderizar.

Entonces, entendamos qué es un objeto Fiber, no el algoritmo, los objetos. Un Fiber también es un objeto JavaScript que contiene información sobre un componente, su entrada y su salida. También corresponde a una instancia de un componente. Hay muchos campos en FiberNode, esta no es una lista exhaustiva en ningún sentido, pero solo para darte una idea general, puedes ver que hay información sobre los hijos del componente, si tiene hermanos, actualizaciones pendientes, props pendientes, estado pendiente, prioridad de trabajo y mucho más. En cuanto al algoritmo Fiber, tiene dos fases, reconciliación y confirmación. La reconciliación es interrumpible, lo que significa que podemos pausarla y reanudarla cuando queramos, y la confirmación no es interrumpible, lo que significa que una vez que la iniciamos, no podemos detenerla. Tenemos que dejar que termine. Durante el renderizado inicial, cada elemento de React que se devuelve desde la llamada a la función de renderizado se convierte en un Fiber. Y cuando un elemento de React se convierte en un nodo Fiber por primera vez, React utiliza ese dato, ese Fiber que se creó a partir de la llamada. Básicamente, el elemento de React se convierte en un Fiber y luego ese Fiber se coloca en un árbol que se llama current. Aquí puedes ver un ejemplo específico para el elemento de entrada, pero esto, por supuesto, también ocurre para todos los demás nodos en el árbol actual.

8. React Fiber y la Fase de Reconciliación

Short description:

React actualiza el DOM de una vez, asegurando consistencia. Durante la fase de reconciliación, React construye un árbol de trabajo en progreso basado en las actualizaciones, que contiene los estados y props más actualizados para cada componente. Este árbol aún no es visible para el usuario. React procesa los componentes de forma asíncrona, pausando y reanudando según el tiempo disponible y los eventos de mayor prioridad. La segunda fase, la fase de confirmación, siempre es síncrona.

El elemento React se convierte en un Fibre, que se utiliza para construir el árbol actual. Este árbol es esencialmente la representación actual del estado de la interfaz de usuario que debe renderizarse. ¿Y se renderizará, verdad? En el primer renderizado cuando cargamos nuestra aplicación.

Ahora hablemos de las actualizaciones. Cuando React comienza a trabajar en las actualizaciones, por ejemplo, un cambio de estado, construye un árbol de trabajo en progreso que refleja el estado futuro que se debe mostrar en la pantalla según esa actualización. Como puedes ver en este caso, tiene los mismos Fibres que el árbol actual. Pero digamos que con este elemento de entrada aquí, podemos ver a la izquierda con el árbol actual, hay una etiqueta de efecto cero, lo que significa que no hay ninguna actualización y el valor es una cadena vacía. Pero a medida que escribimos, por ejemplo, si escribimos `alive`, la primera letra es `E`, obtendremos un Fibre con una etiqueta de efecto cuatro, lo que significa que hay una actualización pendiente y el valor que tendrá es `E`. Todo el trabajo de actualización de estado y props se realiza en los Fibres del árbol de trabajo en progreso. A medida que React recorre el árbol actual para cada nodo de Fibre existente, crea un nodo alternativo y todos estos nodos constituyen el árbol de trabajo en progreso. La razón por la que necesitamos el árbol de trabajo en progreso es porque no queremos realizar cambios en el DOM mientras estamos calculando los cambios, a diferencia del reconciliador de pila. Nuevamente, esta diapositiva muestra un ejemplo de cómo se actualiza nuestro elemento de entrada, pero lo mismo ocurre con todos los demás Fibres que tienen alguna actualización. El árbol de trabajo en progreso contiene los estados y props más actualizados para cada componente, pero aún no se ha mostrado en la pantalla. Pero espera, ¿contiene toda la información más actualizada de cada componente? Bueno, no realmente, porque si recuerdas en nuestra demostración, le dijimos a React que está bien retrasar el cálculo de la lista lenta como máximo dos segundos. Eso significa que otros cálculos, como para nuestro elemento de entrada, tendrán prioridad y se ejecutarán en el hilo principal, mientras que otros trabajos de menor prioridad, como el componente MySlowList en este caso, se encolarán para más tarde porque tiene una prioridad más baja. Solo después de que se haya completado el trabajo de alta prioridad y se haya mostrado en la pantalla, solo cuando hayamos terminado de escribir, porque ese es el trabajo de alta prioridad, entonces React pasará al trabajo de menor prioridad y lo calculará. Y nuevamente, ese es el componente MySlowList. Entonces, React ha procesado el componente de la aplicación y sus hijos, excepto MySlowList. Y ahora ha terminado con la fase de renderizado, la fase de reconciliación. A la derecha está el nuevo árbol que debe mostrarse en la pantalla. Se puede procesar inmediatamente después de la fase de renderizado o la fase de reconciliación, es lo mismo, o se puede retomar más tarde cuando React tenga tiempo por parte del hilo principal del navegador. En nuestro caso, dado que aún no han pasado los dos segundos, digamos que React tiene tiempo para confirmar estos cambios en la pantalla. Y, por supuesto, estos cambios son nuestra escritura en el campo de entrada. Uno de los principios fundamentales de React es la consistencia. React siempre actualiza el DOM de una vez, no muestra resultados parciales, ¿verdad? El árbol de trabajo en progreso sirve como un borrador que aún no es visible para el usuario, para que React pueda procesar todos los componentes primero y luego aplicar los cambios en la pantalla. Es importante entender que el trabajo durante esta primera fase, la fase de reconciliación, se puede realizar de forma asíncrona. React puede procesar uno o más nodos de Fibre según el tiempo disponible, luego detenerse para guardar el trabajo realizado y ceder a algún evento de mayor prioridad si lo hay. Luego continúa desde donde lo dejó. Pero a veces, puede ser necesario descartar el trabajo realizado y comenzar desde el principio. Estas pausas son posibles debido a que el trabajo realizado durante esta fase no conduce a cambios visibles para el usuario, como actualizaciones del DOM. En contraste, la segunda fase, la fase de confirmación, siempre es síncrona.

9. Fase de Confirmación y Beneficios de Fiber

Short description:

La fase de confirmación es donde React itera a través de la lista de efectos y realiza los cambios en el DOM. Después de esta fase, el árbol de trabajo en progreso tiene una versión actualizada del estado de la aplicación. El hook useDeferredValue aborda los problemas de caída de frames y las diferentes prioridades de las tareas. Sin embargo, las características del modo concurrente aún no son estables y no deben utilizarse en producción. Fiber mejora las aplicaciones de React dividiendo el trabajo en unidades pequeñas llamadas Fibers, lo que permite pausar y reanudar. Para obtener más información, consulta la documentación oficial de React y explora el código de React.

Y, por supuesto, eso se debe a que el trabajo realizado durante esta fase conduce a cambios visibles para el usuario, como actualizaciones del DOM, y es por eso que React tiene que hacerlo de una sola vez. No podemos pausar, mostrar resultados parciales y luego reanudarlo. Tiene que hacerse de una sola vez.

Entonces, la fase de confirmación. Actividades como la mutación del DOM o llamar a los métodos del ciclo de vida se consideran efectos y se almacenan en la lista llamada lista de efectos. En nuestro ejemplo, las propiedades tanto del campo de entrada como de la aplicación cambian. Por lo tanto, sus efectos correspondientes se almacenan aquí en esta lista. Y React, esencialmente, en la fase de confirmación, recorrería esta lista y realizaría los cambios en el DOM. Así que, si recuerdas el campo de entrada, necesitamos cambiarlo porque estamos mostrando algo en ese campo de entrada. Pero también, el estado de la aplicación, también necesitamos cambiar su estado. Entonces, ambos componentes, esos elementos, tienen efectos esperando ser confirmados en el DOM.

Esto también significa que, después de que se haya realizado todo este trabajo, el árbol de trabajo en progreso tiene una versión más actualizada del estado de la aplicación, ¿verdad? Entonces, React también intercambia los punteros raíz del árbol actual y el árbol de trabajo en progreso, intercambiando efectivamente el árbol actual con un árbol provisional que construyó en función de la actualización de estado que tuvimos.

Para concluir, si recuerdas, al principio de la presentación, formulé dos problemas que debemos resolver para obtener interfaces de usuario más receptivas. El primero era que las tareas de larga duración causan caídas de frames. Y el segundo era que las diferentes tareas tienen diferentes prioridades. Abordamos esto utilizando el hook useDeferredValue, que aprovecha el algoritmo de Fiber y asigna una prioridad diferente a cada tarea, resolviendo así nuestro problema de caída de frames que tuvimos al principio de la presentación. También es importante mencionar nuevamente que estas características del modo concurrente aún no están disponibles en la versión estable. Y para usarlas, tendrías que instalar una versión experimental de React, lo cual, por supuesto, no se recomienda utilizar en producción, ya que aún hay algunos errores y características faltantes.

Entonces, Fiber mejorará las aplicaciones de React a corto plazo al permitir que las actualizaciones de alta prioridad se adelanten a las actualizaciones de baja prioridad. Y lo hace dividiendo el trabajo en pequeñas unidades llamadas Fibers, que pueden pausarse y reanudarse más tarde. Hay mucho más de qué hablar y mencionar cuando se trata de cómo funciona Fiber. Así que, si estás interesado en Fiber y todas las características experimentales del modo concurrente, te animo encarecidamente a que leas más al respecto. La documentación oficial de React es un gran recurso, al igual que explorar el código de React en sí. Espero que esta presentación te haya dado una buena idea de lo que es posible con Fiber y te haya emocionado un poco por el futuro. Personalmente, creo que la combinación de Fiber y el modo concurrente ofrece un futuro muy prometedor para React, donde como desarrolladores podemos lograr cosas que antes no podíamos y, con eso, permitir una mejor experiencia de usuario en nuestras aplicaciones. Con eso, me gustaría agradecerles a todos por escuchar y disfruten el resto de la conferencia.

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.
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.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

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.