El Componente de React más Caro del Mundo y Cómo Dejar de Escribirlo

Rate this content
Bookmark

Necesitamos dejar de construir componentes de React costosos: componentes que prometen el mundo pero son imposibles de mantener. Luchemos contra el apropcylpse y dejemos de lado nuestras perforaciones de propiedades con esta propuesta para una forma más productiva de trabajar en React.

23 min
25 Oct, 2021

Video Summary and Transcription

La charla de hoy trata sobre componentes costosos de React y diseño de API, con un enfoque en el costo de la coordinación y cómo superar el síndrome del impostor. El orador comparte una historia sobre un gato que intenta arreglar café con sal, resaltando la importancia de encontrar soluciones simples. Se examina el componente de mil millones de dólares en ReactJS.org como ejemplo de un componente costoso. Se discuten técnicas para personalizar mensajes, mejorar la accesibilidad y utilizar propiedades polimórficas. La charla concluye enfatizando el costo de la comunicación y la necesidad de evaluar si las propiedades y los componentes son las herramientas adecuadas para el trabajo.

Available in English

1. Introducción a los componentes costosos de React

Short description:

Hoy vamos a hablar sobre componentes costosos de React y diseño costoso de API. Te mostraré cómo dejar de crear ese componente y compartiré una historia favorita. ¿Quién soy? Soy Michael Chan, un arquitecto de front-end apasionado por el diseño. Soy el anfitrión de React Podcast y trabajo con el Grupo de Trabajo de React. Únete a mi comunidad en Discord en Chan.Dev.Discord. Visita chan.dev.chromatic para trabajar conmigo en Chromatic. Visita chan.dev.expensive para obtener enlaces y notas relacionadas. Anteriormente di una charla llamada Hot Garbage Clean Code is Dead.

Hoy vamos a hablar sobre componentes React costosos, pero probablemente no del tipo de costoso al que estás acostumbrado a escuchar o pensar. Vamos a hablar sobre el diseño costoso de la API, específicamente sobre un componente único que creo que probablemente nos ha costado miles de millones de dólares como industria y, por lo tanto, es el componente más costoso que he visto. Quiero mostrarte cómo puedes dejar de crear ese componente en tus equipos y comunidades.

En los próximos 19 minutos, esto es lo que vamos a ver en esta charla. Vamos a hablar un poco sobre mí, quién soy y por qué estoy aquí. Voy a compartir contigo una de mis historias favoritas y después de eso, vamos a ver algo de código y tratar de sacar conclusiones de la relación entre la historia y el código.

Lo primero es lo primero, ¿quién soy yo? Mi nombre es Michael Chan. Puedes llamarme Michael, Chan, Chan. Michael Chan, como prefieras, como te sientas cómodo. En la mayoría de los lugares de internet que te interesan como desarrollador, me conocen como Chantastic. He pasado los últimos cuatro años como arquitecto de front-end y los últimos 12 años en algún rol de infraestructura de design. Por eso me apasiona tanto el design y el design de componentes. He sido el anfitrión del programa React Podcast. Así que si estás escuchando mi voz, pero suena más lenta porque no está en 2X, soy yo. También he pasado el último año y medio trabajando con el Grupo de Trabajo de React. para ayudar a cerrar la brecha entre React 17 y React 18 que se avecina. Estoy construyendo una community, una comunidad en Discord. Puedes encontrarla en Chan.Dev.Discord, donde hacemos muchas cosas durante el almuerzo. Muchas actividades basadas en el almuerzo para aprender unos de otros y aprender nuevas tecnologías. Y finalmente, recientemente me uní al equipo de Chromatic, la empresa que hace Storybook. Nuestro objetivo es mejorar la experiencia de usuario en la web. Quiero invitarte, si estás interesado en trabajar conmigo y el equipo allí, a visitar chan.dev.chromatic. Y eso te llevará al lugar correcto.

Ahora, quiero compartir un último enlace contigo antes de continuar. Es chan.dev.expensive. Allí encontrarás todo lo relacionado con esta charla, ya sean enlaces o notas o esta misma presentación. Y después de que se publique, presumiblemente un enlace al video de YouTube. Ahora, ¿por qué estoy aquí? Bueno, es una pregunta interesante que comienza hace unos años. Di esta charla hace mucho tiempo, unos tres años más o menos, llamada Hot Garbage Clean Code is Dead. Si te gusta esta charla, probablemente te encantará esa.

2. La Dama que Puso Sal en su Café

Short description:

Comenzó como una presentación técnica sobre las cosas que no funcionaban bien en aplicaciones complejas. Pero se convirtió en un viaje personal para superar el síndrome del impostor y el costo de la coordinación. Compartiré una historia llamada La Dama que Puso Sal en su Café, donde un gato accidentalmente pone sal en su café y busca ayuda de un químico.

Si no te gusta esta charla, odiarás esa. Fue un viaje realmente interesante porque comenzó más como una presentación técnica de cosas que pensé que realmente no funcionaban, patrones que pensé que no funcionaban bien en aplicaciones complejas.

Sin embargo, lentamente comenzó a tomar forma como un viaje personal a medida que aprendía mi propio sentido de pertenencia y superaba el síndrome del impostor y simplemente hacía el trabajo para superar mis demonios. Pero sentí que había algo que quedaba sin decir, específicamente sobre el costo de la coordinación, porque la coordinación es costosa.

Y aunque hice el trabajo hace varios años para entender dónde estaba en mi carrera, ese trabajo está sucediendo a diferentes ritmos para diferentes personas, y puede dificultar mucho la coordinación. Ahora que hemos establecido eso, quiero contarte una historia que realmente cambió la forma en que pienso sobre cómo tomamos decisiones en el código. Y me da un ejemplo divertido en mi cabeza para pensar, y solo quiero compartirlo contigo. Así que vamos a sumergirnos.

Ahora, la historia es este libro llamado La Dama que Puso Sal en su Café. Es muy antiguo y, desafortunadamente, al leerlo nuevamente, está muy marcado por el género, lo que me hace sentir incómodo compartirlo. Con esa esperanza de no violar y cumplir las leyes en esta charla, decidí dar una versión abreviada e interpretada de la historia, usando emojis de gatos y gatitos. Así que he titulado esto el gato personificado que puso sal en su café.

La historia es así. Hay un gato y es por la mañana y este gato hace una taza de café. Ahora, está a punto de ponerle un poco de crema a este café cuando se da cuenta de que en lugar de azúcar, ha puesto sal en el café. Y la sal definitivamente no es azúcar cuando se trata de adornar tu taza de café. Afortunadamente, tenía a todos sus gatitos alrededor, y todos se reúnen y tratan de averiguar qué se puede hacer para salvar esta taza de café que ahora tiene sal dentro. Ahora, había un gatito que había ido a la universidad y se sentía muy inteligente y dijo: 'Sabes, fui a la universidad, soy un gatito muy inteligente, y el café es solo química. Así que deberíamos consultar a un químico'. Y, por supuesto, el gatito había ido a la universidad, y todos asumieron que era muy inteligente. Entonces, acordaron que primero deberían consultar a un químico. Así que van al químico que conocen, encuentran al químico y hay una cosa que debes saber sobre este químico. Este químico no es un químico muy bueno. Han dedicado la mayor parte de su vida a la búsqueda de convertir objetos en oro, una búsqueda en la que han fracasado dramáticamente, y en este mismo momento, están tratando de encontrar formas de encontrar más oro para realizar experimentos. Al principio, el químico dice: 'No tengo tiempo para esto. Estoy muy ocupado con mi trabajo'. Pero los gatos son gatos muy aristocráticos y tienen mucho oro. Él dice: 'Bueno, les daremos el oro para descubrir cómo podemos salvar esta taza de café'. Por supuesto, el químico acepta. Así que el químico comienza a aplicar toda su ciencia y química.

3. El Viaje para Arreglar el Café

Short description:

El gato y los gatitos intentan varias ideas para arreglar el café. Consultan a un químico, pero el café no sabe a sal ni a café. Luego consultan a un herbolario, quien infunde el café con nuevas hierbas y especias, haciéndolo repugnante. Finalmente, consultan a su sabio vecino, quien sugiere hacer una nueva taza de café. Los gatitos están encantados y el gato está feliz.

y pensando en todo lo que sabe en esta taza de café. No tiene idea de cómo resultarán las cosas, pero tiene un par de ideas de cosas que podría intentar. Desafortunadamente, cuando el químico le devuelve la taza de café al gato personificado, bueno, ya no sabe a sal, lo cual es algo bueno, pero tampoco sabe a café. Ahora, eso en realidad es suficiente para el químico, así que presentan su factura y se marchan con el oro. Para no ser vistos nunca más. Bueno, el gato todavía está triste. Tiene una taza de café con sal y los gatitos se vuelven a reunir para ver qué más se puede hacer. Bueno, en este momento, el gatito universitario tiene otra brillante idea. Consultemos a un herbolario. Así que consultan a un herbolario. Van y entran en el bosque y encuentran a un herbolario cuya casa está llena de todas estas hermosas especias y hierbas y plantas de todas forms. Cosas que nunca habían visto antes. Ahora, algo interesante es que a diferencia del químico, al herbolario no le importaba mucho el dinero. Pero sí... eran un poco orgullosos y se sentían incomprendidos en su empresa. Y tenían un gran interés en compartir su pasión y evangelizar la disciplina. Así que aceptaron hacer el trabajo. Vienen y aplican todo lo que saben sobre herbología a esta taza de café. Infundiéndolo con nuevas hierbas y especias y cosas que nadie había escuchado antes.

Desafortunadamente, esto resultó en una taza de café que era simplemente nauseabunda para todos los gatos y los gatitos. Así que ya no sabía a sal, pero también era extremadamente repugnante. Por supuesto, el herbolario arrogante culpó al café, diciendo que estaba embrujado y siguió compartiendo sus buenas noticias con otros que estaban menos malditos.

Ahora, esto dejó a los gatitos en un pequeño aprieto. Estaban al final de sus recursos y el gato se estaba poniendo de mal humor porque ya era bastante tarde en el día y aún no había tomado su café. En este punto, se vuelven a reunir por tercera vez para ver cuál podría ser el siguiente paso posible. Esta vez, el gatito universitario se siente mucho más tranquilo y modesto, dejando espacio para que los otros dos gatitos hagan sus sugerencias. Y lo que sugieren es consultar al sabio y experimentado vecino de al lado. Así que lo hacen. Y la respuesta de este sabio y experimentado vecino es simplemente preguntar, ¿no pueden hacer otra taza de café? Ahora, esta fue una sugerencia extremadamente profunda para todos estos gatitos que habían estado buscando todo el día una forma mucho más complicada de salvar esta taza de café. Y responden con alegría. ¿Por qué no se nos ocurrió eso? exclamaron. Hicieron una nueva taza de café y el gato estaba feliz.

4. El Componente de Mil Millones de Dólares

Short description:

Ahora permíteme mostrarte el componente de mil millones de dólares, el más caro que he visto. Se encuentra en la página principal de la documentación de ReactJS.org. Explicaré por qué es caro y te mostraré el proceso. Nuestra historia comienza con una solicitud para mejorar los saludos con puntuación personalizada. Agregamos nuevas props, confirmamos los cambios y recibimos otra solicitud para personalizar aún más el mensaje con saludos adorables.

El fin. Ahora sé que estamos... estoy en este lado de la pantalla, probablemente estamos a un océano de distancia, pero puedo sentir tu juicio sobre esta historia y posiblemente la forma en que ha terminado. Sabes, porque es, ya sabes, completamente irrealista, ¿verdad? Nadie es tan tonto como para no darse cuenta de que se arregla el café con sal simplemente haciendo otra taza.

Bueno, vamos a ver algo de código. Ahora quiero mostrarte el componente de mil millones de dólares. El componente que he llegado a creer que es el más caro y definitivamente, desproporcionadamente caro que he visto. Así que te lo voy a mostrar ahora. Es posible que ya lo hayas visto porque se encuentra exactamente en la página principal de la documentación de ReactJS.org. Ahora quiero mostrarte esto en la práctica. No solo quiero decirte que es el componente más caro, sino mostrarte algunas de las razones por las que creo que lo es. Y recorrer este proceso contigo.

He colocado esto dentro de una base de código tal cual, pero usando hooks porque ¿por qué la página principal de React.js todavía tiene clases? Así que nuestra historia comienza con esta solicitud. Oye, nos gustaría mejorar el factor amigable de nuestros saludos con puntuación personalizada. Nuestro equipo intentó simplemente agregar puntuación pero falló. Así que no estamos seguros por qué. Si observamos este componente, vemos que es un div, lo cual es desafortunado. Fallará cada vez que intentemos poner puntuación fuera de ese componente. Así que solo necesitamos agregar algunas nuevas props con los valores predeterminados. Lo hacemos. Elegimos 'trailingPunctuation' como el nombre de la prop porque hemos sido profundamente heridos por cosas demasiado genéricas antes. Sabemos que puede haber algunas otras preguntas sobre puntuación más adelante. Así que esto se ve bien. Lo confirmamos y todos están contentos. Recibimos otra alerta del equipo de UX. Oye, equipo de UX aquí de nuevo. Buen trabajo en la última función. Los equipos ya han estado usando 'trailingPunctuation'. Yada yada yada.

5. Personalización de mensajes y mejora de la accesibilidad

Short description:

Podemos personalizar aún más el mensaje con saludos adorables utilizando una nueva prop con un valor predeterminado. Para arreglar la puntuación del saludo en el panel de control, simplemente agrega una coma. Para el proyecto de Cumpleaños Bonanza, aplica un nombre de clase para lograr la animación deseada. También podemos mejorar la accesibilidad cambiando la estructura HTML para que sea más semántica utilizando una prop de componente.

Nos gustaría personalizar aún más el mensaje con saludos adorables como hola, qué tal, qué hay de nuevo. Cosas de ese tipo. ¿Nos puedes ayudar? Bueno, sí, de hecho. Podemos repetir el mismo proceso que hicimos antes utilizando una nueva prop con un valor predeterminado. Así se vería algo como esto. Simplemente moveremos lo que teníamos estáticamente allí. Mover eso como un valor predeterminado. Tener una prop para eso. Podemos cambiar eso y aquí vamos. Muy fácil.

Recibimos otra solicitud. Nuestro equipo de marketing está creando videos y los revisores de contenido están preocupados por la puntuación del saludo en el panel de control. En lugar de `hola Joan`, debería tener una coma. ¿Es algo que podemos arreglar fácilmente? Sí, y de hecho, debido a la forma en que hicimos el saludo y es solo una especie de coincidencia, pero puedes arreglar esto por tu cuenta, solo pon una coma allí. Genial, ni siquiera tienes que hacer nada con esto. Marcado como completado, así que este es interesante.

Estamos colaborando con UX en un proyecto de Cumpleaños Bonanza. Nuestro objetivo es una animación de globos de cumpleaños única sobre el nombre del usuario. Aquí hay un pequeño ejemplo, pero utiliza un nombre de clase. No voy a leer todo. Solo necesitamos aplicar un nombre de clase, eso está bien. Así que vamos a nuestro código, debería ser bastante simple. De hecho, hay un patrón muy conocido para esto. Se trata de usar propiedades de objeto rest para extraer todos los atributos y luego usar JSX spread para colocarlos en el elemento DOM. Así que hacemos eso, bastante simple. Ahora tenemos otra solicitud y esto es interesante. Podríamos haber sospechado que esto es algo que la gente querría hacer eventualmente. Pero en nuestras pruebas de accessibility nos dimos cuenta de que podríamos aprovechar algunas oportunidades fáciles al cambiar la estructura html para que sea más semántica. Entonces surge la pregunta de cómo podemos solucionar esto ahora que ya tenemos un componente que solo hace un div. Bueno, en realidad podemos hacer esto de una manera que no rompa nada con algo que es

6. Uso de Props Polimórficas y Delegación

Short description:

O si quieres ser realmente elegante y presumir ante todos tus amigos, puedes usar un nombre más distintivo y distinguido como la prop polimórfica. Estamos empezando a notar problemas de diseño porque el mensaje de saludo se usaba en todas partes. Podemos resolver esto con un poco de delegación o inversión de control. Finalmente, podríamos haber recurrido a nuestro sabio y conocedor vecino, quien podría haber sugerido que en ningún momento todo esto era necesario. No necesitábamos un componente ni props, solo necesitábamos una función y marcado.

realmente divertida, una prop de componente. O si quieres ser realmente elegante y presumir ante todos tus amigos, puedes usar un nombre más distintivo y distinguido como la prop polimórfica, que parece ser popular en estos días. No es demasiado difícil de implementar, usamos un poco de renombramiento JavaScript con nuestra destructuración y listo. Ahora empezamos a tener algunos problemas. Estamos empezando a notar algunos problemas de diseño porque el mensaje de saludo se usaba en todas partes, pero ahora que podemos cambiar el marcado, estamos empezando a tener cierta confusión sobre por qué cambia el diseño cuando cambiamos ese marcado. Esto se debe a que lo cambiamos para permitir que las personas hagan un div y esto es como un tipo extraño de cambio suave, pero seguimos adelante y pensamos que tal vez podamos resolver esto con props predeterminadas. Bueno, agregamos algunos estilos predeterminados y simplemente los aplicamos al elemento. Desafortunadamente, eso no es realmente suficiente porque a veces alguien puede pasar estos estilos, pero luego se aplican con una alta precedencia, incluso cuando no pasan estilos, lo que nos genera un problema en el que siempre será display block incluso si queremos que sea display inline. Así que podemos resolver esto con un poco de delegación o inversión de control, algunos términos informáticos realmente geniales que nos hacen sentir muy bien acerca de nuestra elección de ser desarrolladores front-end en 2021. Y hacemos un montón de cosas elegantes para decir que, bueno, si es un objeto, intentaremos fusionarlo con algunos valores predeterminados, pero de lo contrario, lo llamaremos como una función, lo cual es un poco gracioso, pero nos permite proporcionar la funcionalidad que queremos, proporcionar los valores predeterminados sin romper nada sin crear realmente una nueva API para optar por esos estilos predeterminados.

Finalmente, con esta solicitud de internacionalización, ya es hora de que empecemos a pensar en la escritura de derecha a izquierda, así que tenemos esta nueva función que podemos usar y podemos simplemente usarla en lugar de tener nuestro propio saludo, ahora podemos procesarlo simplemente dándole el nombre a esta función y luego proporcionará el mensaje que necesitamos. Y así es como se ve nuestro componente al final del día después de agotar tantos de los patrones que usamos como desarrolladores de React, ya sea delegación prop de componente poli o polimórfica, como te guste llamarla, destructuring assignment todas estas cosas realmente geniales para hacer un componente extremadamente flexible y reutilizable. Pero me pregunto si no estamos haciendo lo mismo que los gatos y los gatitos hicieron para desalar su taza de café con sal. Y si no nos satisface porque no estamos siguiendo los pasos del gato universitario para simplemente sentirnos elegantes persiguiendo todas estas cosas que nos hacen sentir conocedores. Infundiéndolo con algo de química o hierbas nuevas. Cuando podríamos haber recurrido a nuestro sabio y conocedor vecino, quien podría haber sugerido que en ningún momento todo esto era necesario. Que elegir usar un componente y props en realidad nos puso en un camino donde nos vimos obligados a resolver algunas cosas que en realidad no necesitaban ser resueltas. Porque todo este tiempo en realidad teníamos estas herramientas disponibles y simplemente estábamos recreando en nuestros propios términos cosas que teníamos disponibles en javascript y html. No necesitábamos un componente ni props, solo necesitábamos una función y marcado. Ahora me quedan menos de tres minutos, tengo como un minuto y medio para terminar y tratar de sacar algunas conclusiones de esto. Mi objetivo no es realmente enseñarte cómo programar, sino lanzar un error. Quiero lanzar el error de que esto no es realmente el Hola Mundo de React. Hay un paso por debajo de eso que nos perdimos al saltar directamente a componentes y props y eso ir directamente a este paso como el primer paso para comprender React y los componentes de React nos ha costado a la industria mucho dinero y que cada patrón que tenemos para props en realidad existe como un medio para evitar el uso de props de esta manera histérica y retrograda. Y al hablar con la gente sobre Y al hablar con la gente sobre por qué sucede esto, he aprendido que nos resulta muy difícil lanzar estos errores por varias razones, y las razones por las que no los lanzamos suenan así. Solo estoy haciendo lo que el linter me dice. Es más seguro de esa manera. Refactorizar es una forma aceptable de procrastinación. Demostrar dominio de los patrones demuestra que soy competente. El líder técnico leyó un blog sobre un patrón y no lo fusionará sin él. La complejidad hace que me sienta más inteligente. Se premian las soluciones rápidas.

7. El Costo de la Comunicación y la Herramienta Correcta

Short description:

Las soluciones lentas no lo son. El problema no es el código. Es la comunicación. El surgimiento del componente nos ha obligado a acercarnos más. Este problema te está costando a ti, me está costando a mí, y está costando a las empresas y comunidades. Necesitamos preguntarnos, ¿es el trabajo que estamos haciendo el trabajo que debe hacerse? ¿Son las props y los componentes la herramienta correcta? Dejemos de crear el componente de React más costoso.

Las soluciones lentas no lo son. No me pagan más por colaborar. La energía requerida para replantear el alcance de un problema es mucha más que la necesaria para aplicar un parche. Soy un ingeniero, no un gerente. Si puedo solucionarlo, sin importar lo chapucero que sea, ¿por qué no lo haría? Prueba el dogma y los criterios se reducen, pero no aumentan. El problema no es el código. Es la comunicación. Queremos que la gente nos vea como gatitos inteligentes. El surgimiento del componente nos ha obligado a acercarnos más de lo que nunca lo hemos hecho antes. Y hay una inmensa tensión organizativa, cultural y social que conduce directamente al dolor que experimentamos al trabajar y diseñar componentes. Y creo que este problema te está costando a ti, me está costando a mí, y está costando a las empresas para las que trabajamos y a las comunidades que apoyamos. Y al pensarlo, las únicas personas que realmente se benefician de todo esto son los consultores y educadores. Así que necesitamos mejorar en hacer la pregunta, ¿es el trabajo que estamos haciendo el trabajo que debe hacerse? Y específicamente para nosotros, los desarrolladores de React, ¿son las props y los componentes la herramienta correcta para el trabajo que tengo cuando existen children y funciones? Los bloques de construcción básicos que siempre han existido en HTML y JavaScript. Ahora, solo si podemos hacer eso, podemos dejar de crear y recrear el componente de React más costoso del mundo. ¡Gracias por escuchar! Nuevamente, soy Chantastic, y espero que esta charla te ayude a pensar un poco mejor sobre el trabajo que estás haciendo. Paz.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn