Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo

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

Muchas charlas recientes en otras conferencias han hablado sobre cómo comenzar a usar React y THREE.js para crear experiencias 3D en la web. En mi carrera he construido varias aplicaciones complejas utilizando esas tecnologías, incluyendo un editor 3D similar a Figma, y he aprendido muchos patrones y trucos sobre cómo hacerlo realmente rápido y escalable. Desafortunadamente, nadie también está hablando de esos trucos y de lo que realmente se necesita para construir un motor de renderizado similar al que usa Figma.
Mi objetivo con esta charla es dar a las personas una visión general de los desafíos que pueden surgir cuando intentas escalar tu aplicación, y cuáles son algunos trucos menos conocidos para superarlos: instancias, técnicas de reducción del uso de memoria, renderizado de texto basado en SDF, GPGPU y estructuras de datos de árbol. Todo, por supuesto, hecho con Javascript, React y THREE.js.

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

FAQ

WebGL es una tecnología de navegador que permite usar la GPU para crear aplicaciones gráficas 3D utilizando JavaScript. Es ampliamente utilizado en aplicaciones cotidianas y profesionales, como Google Maps y Figma, donde acelera el renderizado de gráficos 3D y 2D sin que el usuario se dé cuenta.

Inicialmente, WebGL se utilizaba principalmente para demos de gráficos 3D por usuarios avanzados. Con el tiempo, su uso se expandió para desarrollar aplicaciones reales que mejoraban la experiencia del usuario en casos de uso específicos. Hoy en día, WebGL se integra en aplicaciones de uso diario, utilizándose de manera casi invisible para el usuario final.

React ReFiber permite usar React de manera declarativa para construir aplicaciones y escenas 3D con 3.js, facilitando la reutilización de componentes y la vinculación de datos sin mutaciones imperativas. Esto ha contribuido significativamente a la adopción de WebGL, permitiendo desarrollar aplicaciones complejas con menos código.

Desarrollar aplicaciones gráficas 3D intensivas en datos como Google Maps implica superar múltiples desafíos técnicos, incluyendo la gestión eficiente de la carga y descarga de grandes cantidades de datos, el manejo de detalles a diferentes niveles de zoom y la optimización de colisiones y renderizado para una interacción fluida con el usuario.

Las estrategias clave incluyen limitar las renderizaciones innecesarias, perfilar y reducir el uso de memoria, utilizar algoritmos eficientes y estructuras de datos, y optimizar el uso de la GPU para maximizar el hardware disponible. Estas técnicas son cruciales para mantener un alto rendimiento, especialmente en dispositivos de gama baja.

El instanced rendering permite dibujar múltiples instancias del mismo objeto con una sola llamada a la GPU, reduciendo significativamente los cuellos de botella entre la CPU y la GPU. Esto es especialmente útil para escenas con numerosos objetos idénticos, mejorando enormemente el rendimiento y la eficiencia de renderizado.

Giulio Zausa
Giulio Zausa
20 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
WebGL ha evolucionado desde ser una tecnología de exhibición hasta ser utilizada en aplicaciones cotidianas como Google Maps y Figma. React y 3.js se pueden utilizar juntos para construir aplicaciones WebGL, lo que permite componentes reutilizables y desarrollo declarativo. La construcción de aplicaciones gráficas 3D complejas requiere estructuras de datos eficientes, algoritmos y técnicas de renderizado. El editor CAD Flux utiliza React, 3.js y React ReFiber para manejar documentos de ingeniería complejos y optimizar la utilización de la GPU. La optimización del bucle de renderizado y el rendimiento de la GPU es crucial para mejorar el rendimiento de las aplicaciones WebGL. El renderizado de instancias se puede utilizar para optimizar el renderizado de texto en aplicaciones WebGL, logrando un renderizado eficiente de miles de caracteres 3D.

1. Introducción a WebGL y su Historia

Short description:

¡Hola! Mi nombre es Giulio. Soy un ingeniero de software y he trabajado con React y JavaScript durante bastante tiempo. Recientemente, en mi carrera, he estado desarrollando algunas cosas con WebGL y hoy quería hablar sobre mi experiencia haciéndolo. WebGL es una tecnología del navegador que permite utilizar la GPU para construir aplicaciones basadas en gráficos 3D con JavaScript. Ha estado presente durante bastante tiempo, casi 12 años, y su uso ha cambiado mucho durante ese tiempo. Todo comenzó al principio con algunos usuarios avanzados que construían demos geniales de gráficos 3D, que mostraban la tecnología pero aún no brindaban valor a los usuarios. Sin embargo, después de un tiempo, comenzamos a construir aplicaciones reales que utilizaban WebGL para mejorar la experiencia del usuario en casos de uso específicos, que respondían a una necesidad empresarial específica y mejoraban la experiencia del usuario. Sin embargo, esas experiencias aún se entregaban como aplicaciones especiales, una sección aislada de un sitio web con una escena clara del resto, no algo que usarías todos los días. Esto cambió con el tiempo y hoy en día WebGL se utiliza en todo tipo de aplicaciones que usamos a diario y profesionalmente, incluso piensa en Google Maps o Figma. Ni siquiera sabes que WebGL está ahí, pero está utilizando la GPU para acelerar el renderizado, tanto para aplicaciones 3D como 2D, y es lo que hace posible la aplicación en primer lugar. Entonces, dado que WebGL es tan ampliamente utilizado hoy en día, ¿podemos decir que los gráficos 3D en la web son actualmente una mercancía, algo fácil de construir? Bueno, para responder a esta pregunta, creo que tenemos que analizar cuál es el ecosistema de herramientas actual disponible para ello.

Mi nombre es Giulio. Soy un ingeniero de software y he trabajado con React y JavaScript durante bastante tiempo. Recientemente, en mi carrera, he estado desarrollando algunas cosas con WebGL y hoy quería hablar sobre mi experiencia haciéndolo. Para hablar de ello, creo que tiene sentido primero hablar sobre qué es y su historia.

WebGL es una tecnología del navegador que permite utilizar la GPU para construir aplicaciones basadas en gráficos 3D con JavaScript. Ha estado presente durante bastante tiempo, casi 12 años, y su uso ha cambiado mucho durante ese tiempo. Todo comenzó al principio con algunos usuarios avanzados que construían demos geniales de gráficos 3D, que mostraban la tecnología pero aún no brindaban valor a los usuarios. Sin embargo, después de un tiempo, comenzamos a construir aplicaciones reales que utilizaban WebGL para mejorar la experiencia del usuario en casos de uso específicos, que respondían a una necesidad empresarial específica y mejoraban la experiencia del usuario. Sin embargo, esas experiencias aún se entregaban como aplicaciones especiales, una sección aislada de un sitio web con una escena clara del resto, no algo que usarías todos los días.

Esto cambió con el tiempo y hoy en día WebGL se utiliza en todo tipo de aplicaciones que usamos a diario y profesionalmente, incluso. Piensa en Google Maps o Figma. Ni siquiera sabes que WebGL está ahí, pero está utilizando la GPU para acelerar el renderizado, tanto para aplicaciones 3D como 2D, y es lo que hace posible la aplicación en primer lugar. Entonces, dado que WebGL es tan ampliamente utilizado hoy en día, ¿podemos decir que los gráficos 3D en la web son actualmente una mercancía, algo fácil de construir? Bueno, para responder a esta pregunta, creo que tenemos que analizar cuál es el ecosistema de herramientas actual disponible para ello.

2. Usando React y 3.js para Aplicaciones WebGL

Short description:

Un ejemplo de esto es 3.js, una biblioteca que acelera el desarrollo de aplicaciones WebGL al proporcionar utilidades y envolver su API, brindando una API más similar al DOM. Hoy en día, incluso podemos usar React junto con 3.js para construir aplicaciones WebGL. Gracias a una biblioteca llamada React ReFiber, ahora podemos usar React de manera declarativa para construir aplicaciones y escenas utilizando 3.js. El poder de React radica en que permite reutilizar fácilmente componentes y vincular datos sin mutaciones imperativas. React ReFiber tiene un ecosistema construido a su alrededor, con muchos proyectos de código abierto y bibliotecas de componentes que proporcionan técnicas avanzadas de renderizado. Esto permite a los desarrolladores construir aplicaciones geniales con un código mínimo.

Un ejemplo de esto es 3.js, una biblioteca que acelera el desarrollo de aplicaciones WebGL al proporcionar utilidades y envolver su API, brindando una API más similar al DOM. Hoy en día, incluso podemos usar React junto con 3.js para construir aplicaciones WebGL. Y esto realmente ha impulsado su adopción recientemente.

De hecho, gracias a una biblioteca llamada React ReFiber, ahora podemos usar React de manera declarativa para construir aplicaciones y escenas utilizando 3.js. El poder de React radica en que permite reutilizar fácilmente componentes y vincular tus datos sin mutaciones imperativas. Lo realmente poderoso de React ReFiber es el ecosistema que se ha construido a su alrededor. Hay muchos proyectos de código abierto que facilitan algunas tareas comunes de renderizado 3D, como el procesamiento posterior, el diseño, la física y la accesibilidad. Incluso hay algunas bibliotecas de componentes, como Tri, que proporcionan técnicas de renderizado avanzadas, como iluminación, skyboxes, sombras y controles de teclado y mouse como componentes reutilizables de React.

Esto es realmente poderoso, ya que permite a todos construir aplicaciones geniales con muy pocas líneas de código. Por ejemplo, esta demostración realmente muestra lo que puedes hacer con ella. Física, controles de mouse, materiales avanzados y reflejos. El código necesario para construir algo como esto parece mucho, pero en realidad es sorprendentemente bajo. De hecho, esta demostración tiene alrededor de 60 líneas de código. Esto es posible porque puede reutilizar mucho código de la biblioteca de componentes.

3. Construyendo Aplicaciones Gráficas 3D Complejas

Short description:

Construir aplicaciones gráficas 3D complejas en navegadores es un problema de datos. Requiere estructuras de datos eficientes, algoritmos, representación indexada de datos, transmisión y preprocesamiento de datos para un renderizado eficiente.

Hemos visto muchas demostraciones geniales como esta recientemente en Twitter, y se han realizado muchas charlas en conferencias sobre cómo comenzar con esta nueva tecnología de color. Pero, ¿esto significa que ahora puedo construir fácilmente mi Figma o mi Google Maps solo usando esas bibliotecas y escribiendo unas pocas líneas de código? Bueno, desafortunadamente, no realmente. Por ejemplo, si observamos algo que implementa algo similar a lo que hace Google Maps, como procedural.js, podemos ver cómo rápidamente se convierte en una biblioteca gigante con más de 10,000 líneas de código. Esto se debe a que si deseas desarrollar algo que sea más intensivo en datos y use gráficos 3D, tienes muchos desafíos que superar. Por ejemplo, debes cargar y descargar eficientemente muchos datos, triángulos y texturas que representan el terreno. Debes transmitir tus datos en mosaicos desde un servidor y debes manejar los niveles de detalle entre los niveles de zoom para que, si te alejas, obtengas una resolución más baja de tu escena que se pueda renderizar. Y también deseas una verificación rápida de colisiones para tus interacciones basadas en el mouse. Desafortunadamente, la respuesta a esas preguntas no es algo que realmente encontrarás en un libro de desarrollo web. Es algo que es mucho más común entre los desarrolladores de juegos, no los desarrolladores web. Los desarrolladores de juegos utilizan diferentes lenguajes y herramientas, como C++, por lo que no hay mucho en la web que puedas encontrar. Pero todo este conocimiento interno es lo que hizo posibles los juegos de mundo abierto en primer lugar. Por ejemplo, algoritmos que simplifican dinámicamente una escena compleja cuando la observas desde una distancia. El uso de este tipo de trucos es crucial cuando estás lidiando con cantidades masivas de datos. Si observas aplicaciones complejas en la web, como Figma, en realidad están haciendo exactamente lo mismo bajo el capó. Si ralentizas artificialmente tu computadora y te acercas a un documento complejo de Figma, verás cómo se está renderizando de manera asíncrona y te muestra primero la resolución más baja mientras se carga. Volvamos a verlo. Te acercas y ves cómo puedes obtener una versión pixelada primero y luego se carga cuando está lista sin bloquear el hilo principal ni las interacciones del usuario. El uso de muchas técnicas como estas es lo que hace posible Figma y no lo hace dolorosamente lento. Desafortunadamente, desarrollar este tipo de trucos no es fácil. Implica escribir mucho código hecho a medida para tus datos, para tu caso de uso específico, por lo que es difícil de reutilizar y codificar en una biblioteca. Podemos decir que por esta razón, construir aplicaciones como estas es en realidad un problema de datos. Necesitas estructuras de datos eficientes para representar tus datos. Necesitas algoritmos eficientes para obtener la información que necesitas de las estructuras de datos. También necesitas una representación indexada de datos, como árboles binarios, para acelerar tus algoritmos. También necesitas transmisión para poder cargar datos de manera dinámica desde la web. Lo más importante es que debes preprocesar la mayor cantidad de datos posible para que, cuando se carguen, estén listos para ser renderizados en la máquina cliente sin necesidad de un procesamiento adicional.

4. Construyendo Aplicaciones Gráficas 3D Complejas

Short description:

Estoy trabajando en el motor de renderizado de un nuevo producto llamado Flux. Es un editor CAD colaborativo en línea basado en el navegador. En Flux, queremos manejar documentos de ingeniería muy complejos con muchos componentes. Nuestra aplicación está construida con React, 3JS y React 3 Fiber. Necesitamos admitir documentos grandes con hasta 10,000 componentes electrónicos, proporcionar una vista 3D y garantizar una selección en tiempo real. Para superar estos desafíos, seguimos una metodología de rendimiento que incluye limitar las representaciones de React 3, perfilar los tiempos de renderizado e interacción, reducir el uso de memoria, utilizar algoritmos y estructuras de datos eficientes y optimizar la utilización de la GPU.

Hemos visto los desafíos que implica construir aplicaciones gráficas 3D complejas en navegadores. Quiero mostrarles mi experiencia al respecto al discutir un escenario del mundo real de una aplicación gráfica 3D compleja.

Estoy trabajando en el motor de renderizado de un nuevo producto llamado Flux. Es un editor CAD colaborativo en línea basado en el navegador. Similar a Figma, pero enfocado en ingeniería electrónica y placas de circuito impreso.

En Flux, queremos poder manejar documentos de ingeniería muy complejos. Necesita renderizar escenas muy complicadas con muchos componentes. Cada componente consta de formas 2D y objetos 3D. Queremos que los usuarios puedan diseñar circuitos electrónicos complejos e incluso mostrarlos en 3D, manteniendo siempre una experiencia de usuario fluida.

Nuestra aplicación está construida con React, 3JS y React 3 Fiber. Comparado con Figma y Google Maps, Flux presenta sus propios desafíos. De hecho, queremos poder admitir documentos muy grandes con hasta 10,000 componentes electrónicos. Queremos que cada parte electrónica tenga muchas formas diferentes en su interior, como círculos, rectángulos, texto y modelos 3D. El documento completo tampoco se puede ver de una vez. Queremos que el usuario pueda hacer zoom y verlo todo sin que haya una disminución en el rendimiento. También queremos proporcionar, como se mencionó anteriormente, una vista 3D de su documento, no solo 2D, por lo que los trucos como el almacenamiento en caché de mosaicos no pueden funcionar. Y también queremos una selección en tiempo real para que las interacciones del mouse sean rápidas y ágiles. Todo esto debe poder ejecutarse a 60 cuadros por segundo, incluso en dispositivos móviles y hardware de gama baja.

Por lo tanto, cuando deseas superar desafíos como estos, es importante seguir una metodología de rendimiento. Quiero compartir con ustedes lo que he encontrado que son los puntos más importantes a seguir al escalar tu aplicación de React 3 Fiber. Y estos son los pasos que estamos siguiendo internamente para asegurarnos de que la aplicación se mantenga rápida. Intentamos limitar las representaciones de React 3 tanto como sea posible. Perfilar continuamente los tiempos de renderizado e interacción. Intentamos perfilar y reducir el uso de memoria tanto como sea posible. Utilizamos algoritmos eficientes y estructuras de datos para representar nuestros datos y para algunas tareas. Y por último, utilizamos mucha optimización de la GPU para aprovechar al máximo el hardware que tenemos a nuestra disposición. Las primeras cosas son las representaciones de Reactor. Como se describe en la documentación de React 3 Fiber, debes usar valores de transición, referencias y mutaciones imperativas en tu código que se ejecuta con frecuencia, lo cual a veces puede ser un poco engorroso, pero es la única forma de obtener una animación fluida sin pasar por las representaciones de Reactor. Incluso fuimos más allá de esta guía al optimizar nuestra solución de gestión de estado para usar almacenamiento por particiones y reducir el costo de las suscripciones.

5. Optimizando el Render Loop y el Rendimiento de la GPU

Short description:

Incluso si aplicas todas las optimizaciones a nivel de React, aún necesitas optimizar tu render loop. El perfilado de memoria es crucial para manejar grandes cantidades de datos. Los algoritmos y estructuras de datos eficientes ayudan a optimizar el raycasting. Las optimizaciones de la GPU, como el instanced rendering, pueden mejorar significativamente el rendimiento.

Incluso si aplicas todas las optimizaciones a nivel de React, aún necesitas optimizar tu render loop. Utilizamos el concepto de presupuesto de cuadros. Esto significa que si deseas alcanzar 60 cuadros por segundo, tienes 15 milisegundos para renderizar toda tu escena. Por lo tanto, es crucial utilizar el perfilador de Chrome y ver qué está ocupando mucho tiempo en tu loop de cuadros y optimizar esas cosas primero. A veces, el resultado de esos perfiles puede ser inesperado. Descubrir que has introducido una llamada de función con demasiada complejidad en tu camino crítico.

Otra cosa que hacemos es el perfilado de memoria ya que mantener una huella de memoria baja es crucial cuando manejas grandes cantidades de datos. Utilizando el perfilador de Chrome, puedes tomar una instantánea de la memoria y ver qué está ocupando demasiado espacio. Utilizando este método, por ejemplo, pudimos notar cómo estábamos utilizando cientos de megabytes solo para almacenar UIDs basados en cadenas. Esto nos sugirió usar números en su lugar lo cual nos permitió ahorrar mucho espacio y hacer posible la carga de ciertos documentos.

Otra cosa que necesitas son algoritmos eficientes y estructuras de datos. Esto realmente ayuda, por ejemplo, a optimizar el raycasting que es el proceso de determinar qué objetos están presentes en tu escena en una posición dada. Esto es crucial para las interacciones del mouse ya que necesitas saber qué hay debajo del puntero del cursor. El enfoque ingenuo para este problema como también se implementa en React 3 Fiber es realizar una búsqueda lineal lo cual desafortunadamente puede ser muy costoso cuando tienes miles de objetos. Dado que esto es algo que debe ejecutarse en tiempo real, tener estructuras de datos más rápidas como R3 y BinaryTree realmente puede acelerar mucho tu aplicación.

Otra cosa de la que debes tener en cuenta son las optimizaciones de la GPU. Las GPUs son procesadores paralelos realmente potentes pero debes tener en cuenta el cuello de botella de la CPU y la GPU. De hecho, la comunicación entre la CPU y la GPU no es gratuita. Cada vez que le pides a la GPU que haga algo, también llamado draw call, hay cierta sobrecarga. Por esta razón, quieres mantener tus draw calls lo más bajos posible, especialmente en dispositivos móviles de gama baja. Esto significa que si deseas dibujar, por ejemplo, 10,000 instancias del mismo objeto, una y otra vez, hacerlo de la manera ingenua, utilizando un bucle for, puede ser muy ineficiente. Puedes ver que si queremos renderizar 10,000 instancias del mismo objeto, obtendremos un rendimiento bastante pobre alrededor de 33 FPS. Afortunadamente, hay una forma de optimizar eso y se llama instanced rendering. Con esta técnica, puedes dibujar varias instancias del mismo objeto con una sola llamada a la GPU, reduciendo en gran medida el cuello de botella. Esto puede generar grandes mejoras de rendimiento en algunos casos, como aquí, por ejemplo, donde anteriormente estábamos limitados a un promedio de 33 FPS. Lo interesante del instanced rendering es que es muy personalizable. Incluso si estás limitado a tener la misma geometría y material para cada instancia, puedes programar cómo la GPU está procesando cada vértice y píxel e incluso pasar parámetros personalizados para cada uno. Por ejemplo, puedes darle a cada instancia una posición o tamaño diferente y programar en la GPU cómo interpretar esos parámetros. El instanced rendering fue crucial en Flux para optimizar nuestro renderizado de texto aunque requirió una configuración especial. Verás, el renderizado de texto desafortunadamente no está provisto por WebGL y es algo que debes manejar con tu propia solución personalizada.

6. Optimizando el Renderizado de Texto en Aplicaciones WebGL

Short description:

Para optimizar el renderizado de texto en aplicaciones WebGL, se puede utilizar el renderizado de instancias. Al representar cada carácter como un parámetro de instancia y codificar la geometría deseada en una textura, podemos lograr un renderizado eficiente de miles de caracteres en 3D. Este enfoque permite una animación suave y libera la potencia de procesamiento para otras tareas. Hemos desarrollado un motor de renderizado de texto en 3D y 2D con una API compatible con React, que proporciona un alto rendimiento y eficiencia. Simplemente envuelve tu escena con un componente proveedor y utiliza el componente InstancedText para renderizar texto.

También es bastante complicado, ya que implica formas y geometría que pueden tener muchos triángulos y vértices, lo que puede resultar costoso de dibujar. Para Flux, necesitábamos una solución que pudiera escalar a miles de caracteres en pantalla manteniendo cada carácter como una forma extruida en 3D. Por esta razón, una solución simple en 2D basada en sprites no hubiera funcionado. Necesitábamos geometría en 3D real.

Para optimizar nuestro renderizado de texto, necesitábamos utilizar el renderizado de instancias. Pero como dijimos anteriormente, el renderizado de instancias solo funciona cuando quieres repetir la misma geometría múltiples veces, y obviamente este no es el caso si tienes diferentes caracteres. Sin embargo, también dijimos que podemos personalizar cómo se muestra cada instancia proporcionando parámetros personalizados que pueden codificar cosas como posición y tamaño. Entonces nos preguntamos, ¿y si representamos el texto deseado como un parámetro de instancia? Si eso fuera posible, podríamos codificar nuestra cadena para mostrar en un parámetro de instancia y hacer que la GPU se encargue de dibujar cada carácter por sí mismo.

En este punto, también necesitábamos pasar a la GPU los datos sobre la geometría de cada carácter como secuencias de puntos en 3D. Lo hicimos utilizando texturas. Normalmente, las texturas se utilizan para adjuntar imágenes a las superficies, pero dado que después de todo son una gran matriz de números también podemos usarlas para codificar posiciones en 3D para que la GPU las utilice para representar caracteres como estos. Podemos utilizar los valores RGB para codificar nuestras posiciones XYZ para que podamos codificar la geometría en una textura. El resultado final es algo como esto en el ejemplo aquí. Podemos mostrar 20,000 caracteres en 3D al mismo tiempo con una sola llamada de dibujo y animar cada uno de forma independiente manteniendo una velocidad de fotogramas constante. Puedes preguntar, ¿cómo se habría comportado esto sin esas optimizaciones? Lo probamos y incluso con una fracción de los caracteres en la pantalla, era dolorosamente lento, dejando casi sin potencia de procesamiento para otras cosas más interesantes. En este punto, ya puedo escuchar a alguien diciendo que tal vez también tienes mucho texto para renderizar Y para todos ustedes, acabamos de publicar en NPM nuestro motor de renderizado de texto en 3D y 2D que proporciona un alto rendimiento y eficiencia con una API compatible con React. Simplemente envuelve tu escena con un componente proveedor y utiliza el componente InstancedText donde quieras. Gracias por seguir mi charla. Espero que te haya dado una visión general de lo que significa construir una aplicación compleja de WebGL con una gran cantidad de datos en la actualidad, y espero que mi experiencia que describí sea útil para tus desarrollos en el futuro.

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

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.
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.
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced 2021React Advanced 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
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.
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
React Day Berlin 2023React Day Berlin 2023
16 min
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
Top Content
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced 2022React Advanced 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

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 🤐)
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.
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.
Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
Workshop
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.