Sobre el Origen de React

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Esta charla examina cómo han evolucionado los componentes en React. Miraremos hacia atrás en versiones anteriores de React, las características principales y cómo hitos como Fiber y Concurrent cambiaron la forma en que escribimos componentes en React. Algunos detalles adicionales: quiero dar a los asistentes una idea de cómo lucían los componentes en diferentes puntos importantes de la historia de React. Los componentes escritos en 2013 no se parecen a los componentes escritos en 2015 o hoy en día. Esta es una historia de React que para algunos será un paseo por el carril de los recuerdos y para otros, información completamente nueva.

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

FAQ

Jen Craden hace una analogía entre la evolución biológica descrita por Charles Darwin y la evolución de los componentes en React, destacando cómo ambos procesos implican adaptaciones y cambios graduales a lo largo del tiempo.

Jen Craden comenzó a trabajar con React alrededor de la versión .12, a finales de 2014, porque en ese momento React estaba ganando popularidad y comenzaba a tomar forma dentro de la comunidad de JavaScript.

Los mixins en React eran una forma de compartir código entre componentes. Se utilizaban en los días de createClass, donde se pasaban a un componente con la clave 'mixins' como una matriz de mixins para reutilizar funcionalidades especficas.

En la versión .13 de React, se introdujeron los componentes de clase, que marcaban un cambio fundamental en la forma de construir componentes, alejándose de createClass y acercándose más al JavaScript idiomático. Además, esta versión comenzó a alejarse de los mixins.

Los componentes de función en React son una sintaxis más simple para definir componentes sin estado. Presentados como una alternativa moderna a los componentes de clase, estos componentes permiten la utilización de hooks para manejar estado y efectos, simplificando la composición y reutilización de código.

Los hooks son una característica de React que permite a los componentes de función tener características que antes solo estaban disponibles en los componentes de clase, como el manejo de estado y efectos. Permiten una mayor flexibilidad y reutilización de código dentro de los componentes funcionales.

La introducción de Fiber, un nuevo reconciliador para React, llevó a la deprecación de ciertos métodos de ciclo de vida considerados inseguros debido a su incapacidad para manejar los nuevos procesos de pausa y reanudación de Fiber. Esto condujo a la introducción de nuevos métodos de ciclo de vida más seguros.

Jen Craden es una ingeniera de software senior en Netflix, donde trabaja en el equipo de Plataforma Node.js.

Jenn Creighton
Jenn Creighton
22 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla explora la evolución de los componentes en React, comenzando desde la versión .12. Se discute la introducción de los componentes de clase y la depreciación de los mixins. Se destaca la aparición de los componentes de orden superior como una mejor opción para la reutilización de código. También se cubre la introducción de los hooks en React 16.8 y se mencionan posibles ramas futuras de evolución, como los componentes de servidor y los componentes de función en los hooks.
Available in English: On the Origin of React

1. Introducción a la Evolución de React

Short description:

Bienvenidos a Sobre el Origen de React. Soy Jen Craden, una ingeniera de software senior en Netflix, aquí para hablar sobre la evolución de los componentes. React toma prestado de Sobre el Origen de las Especies, y al igual que los pinzones de Darwin, los componentes de React han evolucionado y se han adaptado. Esta charla proporciona contexto sobre las estructuras antiguas de React y explica qué ha cambiado y por qué.

Soy Jen Craden, y soy una ingeniera de software senior en Netflix, donde trabajo en el equipo de Plataforma Node.js. Así que, hoy estoy aquí para hablarles sobre la evolución. Bueno, la evolución de los componentes.

Esta charla toma prestado su título de Sobre el Origen de las Especies, uno de los libros más conocidos de la historia moderna. Y cuando ves este libro, o el nombre de Charles Darwin, quien lo escribió, probablemente te viene a la mente la palabra evolución. O tal vez sea selección natural. O si eres como yo, son los pinzones. Siempre pienso en los pinzones de Darwin.

Ahora, todas estas son asociaciones válidas, y en realidad todas están relacionadas. Así que, la evolución se basa en la selección natural, y Darwin llegó a la idea de la selección natural durante sus viajes a las Islas Galápagos. Donde observó pinzones. Todos iguales, pero diferentes de manera única. Así que, son los picos, cada uno adaptado a un tipo de alimento específico. Al ver esta graduación y diversidad de estructura en un pequeño grupo de aves relacionadas entre sí en este archipiélago, una especie había sido tomada y modificada para diferentes propósitos. Esos son los pinzones. Pero esta graduación y diversidad de estructura, esta especie tomada y modificada para diferentes propósitos, tal vez también podría ser React components.

Verás, estamos en un punto de la historia de React ahora donde podemos mirar hacia atrás y ver cómo ha evolucionado. Te prometo que esto no es una lección de historia. No vamos a estar memorizando fechas o discutiendo los grandes debates de RFC de 2016 o algo por el estilo. Esta charla pretende ser útil. Las versiones antiguas de React todavía están en producción. Y dependiendo de cuándo hayas aprendido React, es posible que veas un componente de una versión anterior y tengas algunas preguntas. Ahí es donde entra esta charla. Te ayudará a identificar algunas de las estructuras antiguas y proporcionará contexto sobre qué ha cambiado y por qué. Ahora, si has estado escribiendo React desde los primeros días, esta charla es más un viaje por el camino de la memoria. Así es como me sentí al escribirla. He estado trabajando con React desde la versión .12 y fue lanzada a finales de 2014. En ese momento, React ya estaba disponible públicamente desde hace más de un año. Su lanzamiento público inicial fue a mediados de 2013.

2. Evolución de los Componentes de React

Short description:

Los componentes de React alrededor de la versión .12 marcaron el punto de partida. Este período sirvió como referencia para la estructura y el comportamiento de los componentes. Se utilizaba React.createClass, ya que los componentes de clase y función, así como los fragmentos, no existían. Los métodos del ciclo de vida, como component will mount y did mount, se mantuvieron consistentes. La reutilización de código se lograba mediante mixins.

Pero no considero que ese sea nuestro punto de partida. De hecho, vamos a comenzar a analizar los componentes de React alrededor de la versión .12. Nuevamente, esto es cuando comencé a aprender React y eso se debe a que React realmente estaba tomando forma. Estaba comenzando a ganar popularidad en la comunidad de JavaScript, React era la palabra de moda.

Además, no hay cambios significativos en los componentes de React entre .3 y .12. Por lo tanto, este período de tiempo es nuestra referencia para cómo se estructuraban y se comportaban los componentes. Y este es uno de esos componentes. Ahora, algunos de ustedes nunca han visto esto antes y algunos de ustedes están experimentando flashbacks, pero sí, esto es React en sus primeros días.

Ahora, lo primero que probablemente notes es React.createClass. En este momento de la historia de React, no existen los componentes de clase ni los componentes de función. Tampoco tenemos fragmentos y se están renderizando elementos span adicionales. Eso es cierto. Y hay mucho más. No voy a poder enumerar todas las diferencias en React y su ecosistema entre entonces y ahora, pero en cuanto a la estructura del componente, este es nuestro ancestro más antiguo.

A medida que comenzamos a construir un árbol evolutivo de los componentes de React, este se convierte en la base del árbol. Todos los componentes a partir de aquí evolucionaron a partir de CreateClass. Y esas evoluciones siguen algunas ramas comunes. Entonces, si volvemos a mirar este componente, ¿qué atributos evolucionaron junto con la estructura del componente? Además de la creación del propio componente utilizando CreateClass, ¿qué hay de los métodos del ciclo de vida? Aquí he creado todos los métodos del ciclo de vida disponibles en React .12 y anteriores. Por lo tanto, eso incluye component will mount, component did mount, will receive props, will update, did update y will unmount. Estos probablemente te resulten más familiares que CreateClass en sí, y eso se debe a que estos métodos del ciclo de vida no cambian durante gran parte de la historia de React. Probablemente hayas visto o trabajado con estos ciclos de vida en algún momento. Lo que puede resultarte menos familiar son getInitialState y getDefaultProps, y estos hacen exactamente lo que esperarías, establecer el estado inicial o establecer las props predeterminadas. Por lo tanto, es una estructura poco familiar pero un concepto conocido. Al completar las ramas de nuestro árbol, los ciclos de vida se convierten en una de esas ramas. Estaremos atentos a cómo evolucionan estos ciclos de vida con el tiempo en conjunto con la estructura del componente.

Ahora, hay una rama más en este árbol evolutivo por explorar, y eso es la reutilización de código. ¿Cómo compartimos código entre componentes? Bueno, en los días de createClass, solíamos utilizar algo llamado mixins. Aquí tienes un mixin. Se parece notablemente a cómo creamos componentes, pero no pasamos este objeto a createClass.

3. Componentes de React y Reutilización de Código

Short description:

Vamos a proporcionar mixins a los componentes para reutilización de código. Los componentes de clase se introdujeron en la versión .13, lo que supuso un cambio fundamental en la construcción de componentes de React. Se extienden de React.component en lugar de utilizar createClass, y el estado se establece en el constructor mientras que DefaultProps es una propiedad de clase. Los componentes de clase no admiten mixins, lo que marca un inicio lento en la evolución de la reutilización de código en React.

En su lugar, vamos a proporcionarlo a un componente con la clave mixins y una matriz de mixins. Aquí estoy proporcionando el mixin de conteo a este componente. Y ahora puedo usar lo que se proporciona en los mixins como si existiera en el propio componente. Estoy usando this.increment, parte del mixin de conteo, y this.state.count, también parte del mixin de conteo. Así que ahora podemos completar la rama de reutilización de código de nuestro árbol con mixins como la primera evolución en esa rama. No pasa mucho tiempo, por cierto, para que este árbol crezca.

La siguiente versión de React se basa en esta base y vamos a empezar a ver estructuras más familiares como los componentes de clase. Los componentes de clase se introducen en la versión .13. Esto es importante. Es un cambio fundamental en cómo construimos los componentes de React. Ahora, createClass todavía es compatible, pero pronto las clases se convertirán en la opción predeterminada. Y no vamos a pasar mucho tiempo mirando los componentes de clase, pero quiero señalar algunas diferencias clave con respecto a createClass. La primera es que no llamamos a createClass. En su lugar, nos extendemos de React.component. Ahora, getInitialState y getDefaultProps ya no existen. Establecemos el estado en el constructor y establecemos DefaultProps como una propiedad de clase. Bien, vamos a añadir componentes de clase a nuestro árbol. Estos son una evolución directa de createClass. Pero, ¿qué pasa con las otras ramas? ¿Hubo algún cambio? En cuanto a los ciclos de vida, realmente nada. Como se mencionó, la inicialización del estado y DefaultProps es un poco diferente, pero los métodos del ciclo de vida en sí siguen estando. Por lo tanto, los componentes de clase siguen conectados a la rama de los ciclos de vida. ¿Y qué pasa con la reutilización de código? ¿Seguimos utilizando mixins con los componentes de clase? No. Por lo tanto, los componentes de clase no admiten mixins. Y resulta que este es el inicio lento de la evolución de la reutilización de código en React. Por lo tanto, la evolución tiende a ser un proceso lento. La selección natural ocurre de generación en generación, pequeños cambios, adaptaciones permiten a las especies sobrevivir y transmitir esos rasgos a la siguiente generación. Ahora, las polillas moteadas son un ejemplo famoso de selección natural y acción. De alguna manera, a lo largo de 50 años, a partir de la década de 1850, las polillas de color claro cambiaron de color. A principios de 1900, las polillas moteadas oscuras eran la población dominante. Lo fascinante es por qué las polillas cambiaron de color, ¿qué más estaba sucediendo durante esos 50 años? No eran solo las polillas las que estaban evolucionando.

4. Evolución de React y la Deprecación de Mixins

Short description:

La revolución industrial forzó la evolución en las especies. Los mixins no fueron deprecados en React hasta la versión .13, pero los componentes de clase sin mixins impulsaron a React a evolucionar más allá de ellos. Los componentes de función fueron introducidos como una sintaxis más simple para los componentes existentes, adoptados por la comunidad de React. Sin embargo, carecían de ciclos de vida y opciones de reutilización de código. Una publicación de blog titulada 'Mixins Considerados Dañinos' en 2016 señaló la próxima deprecación de mixins en React.

La revolución industrial significó la construcción de fábricas, fábricas que funcionaban con carbón y producían un humo oscuro que cubría el paisaje, por lo que las polillas moteadas de color claro tenían menos capacidad para camuflarse. Los depredadores podían detectarlas en contraste con el paisaje más oscuro, y su tasa de supervivencia disminuyó, pero las polillas moteadas oscuras, su tasa de supervivencia aumentó. Así que a veces la selección natural es simplemente una casualidad, una mutación que resulta ser una mejora de la versión anterior, pero a veces la evolución se ve forzada en una especie.

Y debo dejar claro que `forzada` no implica intención. Los mixins ni siquiera fueron deprecados en la versión .13, y no había intención de deprecar mixins en versiones futuras. La regla era simplemente si se requería un mixin, usar create class. Los componentes de clase estaban destinados a evolucionar, React más cercano al JavaScript idiomático. Los mixins no eran parte de JavaScript, por lo que tenía sentido no incluirlos. Ahora, la falta de soporte no pretendía alejar a React de los mixins, aunque eso es lo que sucedió. No fue intencional, pero los componentes de clase sin mixins nos obligaron a evolucionar más allá de ellos.

Sin embargo, la evolución es un proceso lento, por lo que antes de que eso suceda, tenemos un nuevo desarrollo en React. Componentes sin estado, o como los llamamos ahora, componentes de función. Entonces, `sin estado` no era el mejor término para estos porque los componentes sin estado ya existían. Podías crear un componente solo con la función render. Los ciclos de vida, el estado e incluso las props siguen siendo 100% opcionales en los componentes de React. Por lo tanto, es mejor describirlos por lo que son, componentes de función. Estos se presentan como una nueva sintaxis más simple para los componentes que ya estábamos escribiendo, y debo decir que son hermosos. Cuando se lanzan, es encantador. Aún mejor con la deconstrucción de props, como, oh, mira eso, es tan hermoso. Cuando se lanzan, la comunidad de React abraza por completo los componentes de función. Estos son una adición bienvenida al árbol evolutivo de React.

Ahora, en ese momento, no hay ciclos de vida en los componentes de función y no hay opciones para reutilización de código. Al igual que los componentes de clase, los componentes de función acercan a React al JavaScript idiomático. Por lo tanto, esta evolución tiene sentido. Pero ahora tenemos create class, componentes de clase, componentes de función y create class todavía es un requisito para los mixins. Eso va a cambiar pronto. De hecho, ha estado en proceso durante un tiempo. A principios de 2016, se publica una nueva publicación de blog en el blog oficial de React. Su título es `Mixins Considerados Dañinos`. ¿Qué pasó? Entonces, a partir de .13, los mixins no están deprecados y van a ser deprecados, ¿qué cambió? Mira, los mixins no eran una gran solución desde el principio.

5. Evolución de la Reutilización de Código en React

Short description:

Los mixins en React se utilizaron inicialmente como una vía de escape, pero a medida que React evolucionó y la composición se hizo popular, se descubrió que los mixins eran perjudiciales. Los componentes de orden superior (HOC) surgieron como una mejor opción para la reutilización de código, proporcionando funcionalidad adicional a los componentes. Aunque los HOC tenían algunos problemas como colisiones de nombres, ofrecían un enfoque compositivo para la reutilización de código en React. Con la introducción de los componentes de orden superior, React estaba en camino de convertirse en una tecnología moderna. Se saltó la versión 15 de React y la versión 16 introdujo fragmentos, límites de errores, portales y más.

Sufren problemas de indirección, mantenimiento y, lo más importante, rompen la composición. La composición es un concepto fundamental en React. Este artículo de blog todavía está disponible si quieres leerlo, pero la versión resumida es que los mixins no estaban destinados a esto. Se crearon como una vía de escape. Han pasado tres años desde que se lanzó React. El panorama ha cambiado. Ahora, varias bibliotecas de Vue adoptan un modelo de componentes similar a React. El uso de la composición en lugar de la herencia para construir interfaces de usuario declarativas ya no es una novedad.

Anteriormente, los mixins no se consideraban perjudiciales en la historia de React, pero a medida que React se volvió más popular y se adoptó la composición, nos dimos cuenta de que los mixins eran perjudiciales y que no necesitábamos la vía de escape que proporcionaban. Había opciones mejores que se ajustaban al modelo compositivo de React, como los componentes de orden superior. Un componente de orden superior es una función que toma un componente y devuelve un nuevo componente, y a menudo se le proporciona funcionalidad adicional. Este componente withCounter es un componente de orden superior, y por cierto, eso es un poco largo, así que voy a empezar a llamarlos HOC. Este HOC recibe un componente y proporciona un contador y una función para incrementar ese contador.

Aquí hay un componente de botón que espera una función de incremento y un contador, y aquí proporciono el componente de botón al HOC y obtengo un nuevo botón de contador con toda la funcionalidad que necesito. Este es un ejemplo muy forzado, pero esa es la idea principal. Los HOC todavía tienen problemas como colisiones de nombres, pero ahora tenemos una opción para reutilizar código con componentes de clase y es compositiva. Ahora podemos agregar componentes de orden superior como la próxima generación de reutilización de código en React. Sé que no parece así, pero con esa adición, estamos realmente cerca de tener un React moderno.

Más cerca de lo que piensas. Este árbol en realidad no cambia durante mucho tiempo. La próxima versión importante de React es la versión 15. Sí, lo sé. Pasamos de la versión .14 a la 15. Las versiones anteriores de React estaban destinadas a llegar a una versión estable 1.0, pero React ya era estable y lo había sido durante un tiempo. Así que simplemente pasamos a la versión 15. Y la versión 15 tiene muchas actualizaciones, pero nada que cambie fundamentalmente la estructura de los componentes. Así que la vamos a omitir y pasar a la siguiente versión importante. La versión 16. En su lanzamiento inicial, la versión 16.0 introduce fragmentos, límites de errores, portales y más.

6. Evolución de React: Ciclos de vida y Hooks

Short description:

Las versiones 16.3 y 16.8 introdujeron la deprecación de los ciclos de vida y los hooks. Fiber, el reconciliador de React, permitió pausar y reanudar el trabajo, lo que hizo que algunos métodos de ciclo de vida fueran inseguros. Se introdujeron nuevos métodos de ciclo de vida para manejar estos cambios. Los hooks son una evolución de los componentes de función, proporcionando una nueva opción para la reutilización de código. La línea de tiempo termina con React 17, que no tiene nuevas características visibles para los desarrolladores.

Pero no hubo cambios reales en los componentes o ciclos de vida hasta un poco más tarde. Por lo tanto, me refiero a las versiones 16.3 y 16.8 como dos lanzamientos importantes que no fueron lanzamientos importantes. Técnicamente, estos son lanzamientos menores, pero es cuando se introducen las deprecaciones de los ciclos de vida y los hooks están disponibles. Las deprecaciones de los ciclos de vida son un poco impactantes. Recuerda que React fue introducido y desde entonces no ha habido cambios significativos en los ciclos de vida, pero en la versión 16.3, se marcan tres ciclos de vida como inseguros. Los ciclos de vida en sí no se eliminan, pero para usarlos, ahora necesitas usar el prefijo inseguro.

Y esto es para el montaje del componente, la actualización del componente y la recepción de props del componente. Ahora, ¿por qué estos cambios y por qué ahora? La respuesta es Fiber. Fiber es el reconciliador de React y te lo voy a explicar muy, muy rápido. Si estás interesado en esto, hay muchos recursos más detallados, pero para contextualizar estos cambios en los ciclos de vida, esto es lo que necesitas saber. Antes de Fiber, el reconciliador usaba la recursión, pero la recursión no te permite detener y comenzar un proceso. Fiber puede hacerlo, por lo que React puede hacer un trabajo, pausar, permitir que el navegador haga un trabajo y luego reanudar su propio trabajo, y así sucesivamente. Y debido a que el trabajo se puede pausar y reanudar, algunos métodos de ciclo de vida eran inseguros. Esperamos que el montaje del componente sea seguido por el desmontaje del componente, pero con Fiber es posible que el montaje del componente se llame varias veces y que el desmontaje del componente no se llame en absoluto. Por lo tanto, el trabajo puede detenerse antes de que se monte el componente y por eso es inseguro. Para ayudar con estos cambios, se introdujeron nuevos métodos de ciclo de vida. Así que tenemos el método getDerivedStateFromProps y el método getSnapshotBeforeUpdate. No voy a perder tiempo explicando estos, hay una gran documentación disponible si no te resultan familiares, pero estos son los primeros nuevos ciclos de vida en toda la historia de React, y esta también es la última evolución en ese lado del árbol. El lado más centrado en los componentes de clase, los ciclos de vida y los HOC. A medida que avanzamos en nuestra línea de tiempo, se introducen los hooks.

Nuevamente, no voy a explicar los hooks, pero son una evolución de los componentes de función. Ahora podemos usar estado en los componentes de función y hay otros hooks que nos permiten acceder a las capacidades que antes estaban limitadas solo a los componentes de clase. Sin embargo, notarás que no conecto la rama de los ciclos de vida con los hooks. Y eso es porque los hooks no son ciclos de vida. No hay ciclos de vida reales en los componentes de función, eso es el futuro de React. useEffect puede ejecutarse una vez, se puede proporcionar una función de limpieza, pero eso no son ciclos de vida. Los hooks también son una opción completamente nueva para la reutilización de código que no está relacionada con los HOC o los mixins, es una nueva rama por sí misma. Y así, llegamos al final de la línea de tiempo. Llegó rápido, lo sé. La versión 17 se lanzó sin nuevas características visibles para los desarrolladores y aquí estamos en el React moderno.

7. Evolución de React: ¿Qué sigue?

Short description:

Nuestro árbol evolutivo sigue sin cambios. La investigación del equipo de React sobre los componentes del servidor y los componentes de función en hooks podrían ser ramas potenciales para la evolución futura. A medida que avanzamos, es posible que olvidemos cómo solían ser las cosas, pero es un viaje emocionante ver cuánto hemos avanzado. Gracias a todos por escuchar.

Nuestro árbol evolutivo sigue sin cambios. Esto podría hacernos preguntar, ¿qué sigue? Tengo algunas suposiciones, quiero decir, el equipo de React compartió su investigación sobre los componentes del servidor el año pasado, eso podría ser una rama en este árbol. O al mirar los componentes de función en hooks, esa parte del árbol está un poco vacía, así que tal vez ahí es donde veremos alguna evolución.

La verdad es que no lo sé realmente. Lo que sí sé es que, al escribir esta charla, me di cuenta de cuánto había olvidado sobre los primeros tiempos de React. Supongo que esa es la ventaja de poder avanzar sin mirar atrás. Y si eres nuevo en React, te va a pasar a ti también, vas a olvidar cómo solían ser las cosas.

Oh, y no puedo esperar ese momento para ti, porque no solo React evolucionó en ese tiempo, tú también lo hiciste. Vas a poder ver cuánto has avanzado. Y con eso, solo quiero decir, gracias a todos por escuchar. Nos vemos en línea y algún día en el mundo real también. ♪♪

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.