TypeScript y React: Secretos de un Matrimonio Feliz

Rate this content
Bookmark

TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código sorprendentemente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.

21 min
24 Oct, 2022

Video Summary and Transcription

React y TypeScript tienen una relación sólida, con TypeScript ofreciendo beneficios como una mejor verificación de tipos y cumplimiento de contratos. Fallar temprano y fallar enérgicamente es importante en el desarrollo de software para detectar errores y depurar de manera efectiva. TypeScript proporciona una detección temprana de errores y garantiza la precisión de los datos en componentes y hooks. Ofrece una seguridad de tipos superior pero puede volverse complejo a medida que crece la base de código. El uso de tipos de unión en props puede resolver errores y abordar dependencias. La comunicación dinámica y los contratos de tipos se pueden lograr a través de los genéricos. Comprender los tipos incorporados de React y los hooks como useState y useRef es crucial para aprovechar su funcionalidad.

Available in English

1. Introducción a React y TypeScript

Short description:

React y TypeScript son como amantes condenados. Muchas personas entran en un período de luna de miel con React y TypeScript, pero eventualmente se dan cuenta de que algunas cosas no encajan. Sin embargo, hay un secreto para un matrimonio feliz entre React y TypeScript. TypeScript es enormemente popular en la comunidad de React y ofrece beneficios que los archivos JSX y los tipos de propiedades no proporcionan. TypeScript ofrece una mejor verificación de tipos, autocompletado y hace cumplir contratos a nivel de componente. También funciona perfectamente con los hooks de React, que son esenciales en el desarrollo moderno de React.

♪♪ Dos casas, ambas igualmente dignas, en el justo VS code, donde establecemos nuestra escena. De los vientres fatales de estos dos enemigos, una pareja de amantes condenados toma su vida. React y TypeScript, amantes condenados, lo creo. Sabes, creo que son almas gemelas. Pero muchas personas entran en un período de luna de miel con React y TypeScript, los juntan, y luego se dan cuenta de que algunas cosas realmente no encajan. Y nunca cumplen completamente la relación y nunca llegan a la vejez.

Así que quiero contarte el secreto de un matrimonio feliz entre React y TypeScript, cómo sobrevivir al período de luna de miel y la decepción posterior. Soy el Rodney Molinow TypeScript, aparentemente. Esa es mi especie de lema en Twitter. Así es como todos me conocen. Soy mattpoco.uk en Twitter. Estoy construyendo un curso llamado totaltypescript.com, que se ve increíble. Mira todas estas ilustraciones, que cubrirá una gran cantidad de TypeScript, con suerte todo, básicamente, desde todo lo básico hasta todo lo avanzado. Y también trabajo en Vassell en un producto diferente llamado TurboRepo, que también es muy bueno.

Entonces, ¿por qué usar TypeScript en React? ¿Por qué no simplemente usar JSX? Bueno, debe haber algo en esto porque TypeScript es enormemente popular. Y si estás construyendo una aplicación de React en este momento, o eliges usar TypeScript o probablemente eliges no usar TypeScript. Pero TypeScript siempre está en la conversación. Entonces, ¿por qué no simplemente usar archivos JSX? Bueno, hay una página en la documentación de React que es básicamente la verificación de tipos en React. Y está utilizando algo llamado prop types. Y los prop types básicamente te permiten darle a un componente una especie de interfaz para decirle cómo se supone que debes llamar a ese componente. Y no está mal. Quiero decir, si usas esto y si dices, está bien, quiero usar esta entrada aquí, entonces realmente te da algo de autocompletado en el nombre aquí. Y si cambio esto a ID, también obtendré autocompletado en el ID. Entonces no es terrible, pero también es como, cuando ves TypeScript, no volverás a mirar esto. Lo siguiente es que no realmente hace cumplir un contrato a nivel de componente. Te da algunas pistas y te permite, de alguna manera, documenta lo que hace un poco, pero los prop types realmente no generan errores. Solo muestra un error en la consola. Y si no estás mirando la consola, entonces realmente no verás nada de esto. Tampoco funciona con los hooks. Y los hooks son como la moneda principal de React desde que se lanzaron.

2. Importancia de Fallar Temprano y Fallar en Grande

Short description:

Fallar en la consola es demasiado tarde. Quieres detectar errores lo antes posible. Fallar temprano facilita la depuración y la extracción del error. Fallar en grande significa no ignorar los errores. Es importante fallar temprano y fallar en grande.

Y fallar en la consola es realmente demasiado tarde para un fallo. Realmente quieres obtener ese error lo antes posible. Y si no estás revisando la consola, entonces podrías simplemente enviar ese código a producción y podría fallar. Y la razón de esto es, es que siempre quieres fallar antes. Cuanto antes falles, más fácil será ver qué sucedió. Porque si fallas demasiado tarde y ese error y esa mala especie de cosa, como ese mal data que pasas a tu componente atraviesa tu sistema, entonces es realmente, realmente difícil depurarlo. Es como si estuviera enterrado en tu sistema y tienes que extraerlo. Y cuanto más fuerte falles, más difícil será ignorarlo también. Si solo estás mostrando un error en la consola, eso no hará realmente el trabajo. Idealmente, quieres fallar temprano y fallar en grande, como siempre decía mi mamá.

3. Failing Early and Failing Hard in TypeScript

Short description:

En TypeScript, puedes asegurar la precisión de los datos pasados a los componentes y hooks al definir sus tipos en línea. Esto permite detectar tempranamente propiedades faltantes o incorrectas, lo que resulta en una aplicación más robusta.

¿Y qué significa realmente fallar en grande? Bueno, en tu aplicación, cada vez que tienes un componente, cada vez que tienes un hook, básicamente estás llamando a ese componente o hook. Sabes, es como una función. Y cuando haces eso, realmente quieres que las cosas que pasas sean precisas. Me gusta pensar en esto como las costuras de tu aplicación. Como los componentes y los hooks, son como los trozos de tela que estás uniendo al llamarlos. Sabes, mi esposa es como, ella hace costura y esas cosas. Así que estoy seguro de que está en la otra habitación pensando, ¿de qué demonios estás hablando? Pero la idea es que si tus costuras son fuertes, entonces tu aplicación será más robusta. Y así es como lo haces en TypeScript. Entonces tienes esta entrada aquí, digamos, y en lugar de hacer esto con prop types, puedes hacerlo en línea aquí. Puedes decir props nombre string. Y ahora, si no lo paso, me va a gritar, lo cual es agradable. Falta la propiedad nombre en el tipo azul, requerida en el tipo azul. Y también, si le paso algo incorrecto, también me va a gritar. Así que si le paso un número aquí.

4. Benefits and Challenges of Using TypeScript

Short description:

TypeScript permite la detección temprana de errores mientras escribes, proporcionando una experiencia de desarrollo sólida y eficiente. Admite la declaración en línea de props y hooks, con la capacidad de especificar tipos para parámetros y valores de retorno. TypeScript ofrece una seguridad de tipo superior en comparación con prop types y ayuda a establecer una base sólida para tu código. Sin embargo, a medida que tu código crece, la complejidad de los contratos de funciones puede convertirse en un factor de estrés. Es necesario considerar cuidadosamente las llamadas a funciones y sus contratos para mantener una relación saludable y duradera entre TypeScript y tu proyecto.

Y esto es como el fallo más temprano que puedas imaginar. Está fallando mientras escribes. Y a mucha gente no le gusta esto en absoluto. Es como si mi profesor de inglés estuviera mirando por encima de mí y dijera: `No, lo hiciste mal, cómo te atreves`. Pero me encanta esto porque está fallando tan temprano como sea posible. Y también está fallando realmente duro. Te está dando esta horrible advertencia justo ahí. Y a menudo, si lo conectas a tu CI, entonces no te permitirá enviar esto.

Entonces puedes declarar props en línea de esta manera, o puedes declararlos con una interfaz como esta, o también con un tipo, tipo o interfaz, no importa. Y también puedes hacer esto para los hooks. Así que este use inputs aquí, tiene un objeto params, que tiene este valor predeterminado string. También puedes especificar funciones aquí. Valor string Booleano. Y puedes consultar la documentación de TypeScript para obtener más información al respecto. Y si devuelvo algo incorrecto de esto, si solo devuelvo un número aquí, entonces me gritará porque el número no es un tipo Booleano simple. Así que no solo son funciones y lo siento, hooks y componentes, son todas las funciones, en realidad. Y muchas otras cosas también. Entonces, nuevamente, puedes declarar esto con una interfaz o también puedes declararlo con un tipo.

Entonces podrías pensar que estoy enamorado. Esto es mucho mejor que los prop types, la basura con la que estaba lidiando antes. Pero suave, qué luz a través de esa ventana se rompe es la seguridad de tipo y TypeScript es el sol. Y esto es lo que los expertos llaman el período de luna de miel. Esta es la parte de tu relación antes de que comiences a compartir una nevera. Y a medida que avanzas aquí, comienzas a pensar, okay, ¿cómo hacemos que esta relación dure? ¿Cuáles son los factores de estrés en esta relación? ¿Cómo va a sobrellevarlo en el futuro? Ahora, el gran factor de estrés que entra en juego es que los contratos que especificas en estas escenas, tus llamadas de función, a veces pueden ser realmente, realmente complicados. Y si piensas en este problema aquí, tenemos un botón y es como uno de esos botones que podrías haber visto antes, donde si pasas una ref, sé que es href, pero siempre lo llamo ref, así que ten paciencia, entonces se renderiza como un enlace. Si no pasas un enlace y en su lugar pasas un onClick, entonces se renderiza como un botón. Y así puedes, como, unificar un poco tu estilo y significa que puedes hacer botones y enlaces y cosas diferentes. Pero imagina que accidentalmente pasas un href y un onClick. Mmm, ¿qué va a pasar aquí? Bueno, este onClick se va a ignorar debido a la lógica que está aquí arriba. Y este es un archivo JavaScript, así que no nos está dando nada.

5. Dynamic Props and Union Types in TypeScript

Short description:

Podemos usar propiedades opcionales en TypeScript para permitir el paso de href o onClick, o ninguno de los dos. Sin embargo, este enfoque puede llevar a errores. Para resolver esto, podemos usar un patrón de props dinámicas con tipos de unión, que permite la existencia separada de href y onClick. Al combinar props normales con children y props dinámicas, podemos crear un botón que exija la presencia de href o onClick. Este enfoque resuelve errores tanto dentro como fuera de los componentes, proporcionando una solución más robusta. Los tipos de unión en props ofrecen una alternativa más sencilla a herramientas más complejas y pueden abordar las dependencias entre props.

También podemos no pasar nada a esto si queremos. Y esto parece un poco absurdo porque ahora tenemos un botón que no hace nada. Y realmente queremos que nuestros botones hagan hrefs y onClicks.

Entonces, ¿cómo resolveríamos esto en TypeScript? Bueno, ya sabes, estás en tu período de luna de miel y estás pensando, wow, soy esta persona hermosa y maravillosa. Así que usas propiedades opcionales. Dices, okay, no necesitas pasar un href y no necesitas pasar un onClick. Y simplemente los agregamos así. Y nuevamente, tu lógica se mantiene igual, lo cual es agradable. Pero esto, nuevamente, es un poco dudoso. Tanto el href como el onClick aún se pueden proporcionar o aún podemos no pasar ninguno. Estos siguen siendo válidos.

Entonces, ¿cómo hacemos que TypeScript vaya con nosotros y diga que puedes pasar un href o un onClick? Bueno, puedes usar este tipo de patrón de props dinámicas. Y lo que esto está haciendo es decir que puedes pasar un href que es una cadena aquí, o puedes pasar un onClick void aquí. Y básicamente está diciendo que estos dos objetos pueden existir de forma separada. Y lo que decimos es que combinamos nuestras props normales aquí con los children que tenemos y las props dinámicas. Y así obtienes un botón donde tienes que ignorar estos errores por ahora, que realmente da un error cuando no asignas ninguno de los dos. Así que ahora podemos pasar href o podemos pasar onClick, lo cual es muy, muy bueno.

Pero tenemos un problema, que es que en realidad da un error dentro de los componentes. Podríamos hacer algunas cosas divertidas aquí dentro, podemos decir props as any, pero entonces tendríamos que hacer eso en todas partes. Entonces, ¿por qué está dando un error? Bueno, está diciendo que puedes pasar un objeto con un href o un objeto con un onClick, y en realidad no puedes reducir el objeto props solo accediendo a algo en él. TypeScript no te permitirá hacer eso. Así que necesitamos refactorizar esto ligeramente para usar una comprobación aquí. Entonces, si href en props, que esto es solo JavaScript válido, entonces eso comprueba que tiene un atributo href dentro de props, y lo que eso significa es que realmente tienes href aquí, lo cual es agradable. Y significa que, dado que estamos devolviendo dentro de aquí, entonces props tiene un href en este cierre, pero en realidad tiene un props.onClick en este cierre. Así que TypeScript es realmente útil aquí. Y eso significa que ahora está contento fuera de los componentes y contento dentro de los componentes, lo cual es genial. Y esto se llama un tipo de unión, y realmente recomiendo usarlos. Los tipos de unión en props pueden resolver muchos problemas que crees que necesitas herramientas más complicadas para usar, pero en realidad solo necesitas un tipo de unión. Hay más cosas aquí. Otro problema que puede ocurrir es cuando tienes algunas props que crees que son dependientes entre sí.

6. Understanding Type Safety and Sync Issues

Short description:

Pasamos las filas a nuestra tabla, nombre John, nombre Vakas, y luego tenemos renderizar fila. Pero esta fila, su tipo es desconocido. Así que terminaremos teniendo que hacer algo como nombre cadena, solo para contentar a la otra persona. Pero realmente hemos perdido un poco de seguridad de tipo aquí. Y si agregamos un ID aquí, ya sabes, número de ID, entonces esto no está presente en las filas de arriba, por lo que estos dos pueden desincronizarse.

Aquí tenemos filas y luego renderizar fila y lo usamos de esta manera. Pasamos las filas a nuestra tabla, nombre John, nombre Vakas, y luego tenemos renderizar fila. Pero esta fila, su tipo es desconocido. Ahora eso es tonto, eso es estúpido. ¿Por qué no me entendiste? Sabemos que es este tipo, ¿verdad? Así que terminaremos teniendo que hacer algo como nombre cadena, solo para contentar a la otra persona. Pero esto en realidad no es asignable. Entonces, el tipo desconocido no es asignable a ese tipo. Así que terminamos teniendo que hacer cualquier cosa aquí arriba. Pero realmente hemos perdido un poco de seguridad de tipo aquí. Y si agregamos un ID aquí, ya sabes, número de ID, entonces esto no está presente en las filas de arriba, por lo que estos dos pueden desincronizarse. Y esta sensación de desincronización es realmente, realmente peligrosa para la relación.

7. Comunicación Dinámica y Contratos de Tipo

Short description:

La solución es comunicarse de manera dinámica y asegurarse de que las props pasadas al componente de tabla coincidan con la estructura esperada. Mediante el uso de genéricos, podemos crear un nuevo tipo que imponga la estructura correcta de las props. Esto permite la creación de contratos dinámicos poderosos y facilita la reutilización de componentes de tabla en diversos contextos.

Entonces, la solución es, y de hecho, permíteme arreglar esto desde otro ángulo. La solución aquí es comunicarse de manera dinámica y decir, cuando llames a esta tabla, voy a escucharte. TypeScript te va a escuchar y decir, okay, lo que sea que esté aquí también debe estar aquí. Entonces, estas dos cosas, lo que sean, van a ser lo mismo. Y luego puedes agregar esto, esto se llama un genérico aquí arriba. Y es como un argumento de tipo. Entonces, si quiero crear un nuevo tipo a partir de esto, puedo decir que mis props de tabla son iguales a las props de tabla, y puedo pasar cualquier cosa a esto. Puedo decir nombre, cadena, ID número, lo que sea, y luego termino con filas, o en realidad si hago const props es igual a mis props de tabla, luego puedo decir que tenemos filas, y eso ahora debe ser ID y nombre. Entonces, esto es como una forma de insertar un tipo en otro tipo. Esto convierte las props de tabla en una función. Y puedo decir t row aquí adentro, y voy a agregar t row a este pequeño espacio genérico aquí. Eso me permite, si quiero, pasar argumentos de tipo junto con mis argumentos regulares a esta función. Ahora, lo que eso va a hacer es que si no terminas pasando un argumento de tipo, lo va a inferir de aquí arriba. Y lo que obtenemos es en realidad si elimino esta parte aquí, ahora tenemos nombre jar nombre vacas, y la fila tiene el tipo nombre cadena. Si te colocas sobre esta tabla aquí, puedes ver que tiene este pequeño t row aquí, que es muy, muy útil. Y si agregamos otra propiedad a este ID uno, por ejemplo, entonces podré acceder a ID en este también. Así que puedo decir que la clave ahora es row dot ID, para darle a vacas un ID dos, ahí vamos. Extremadamente útil cuando tienes diferentes propiedades en el mismo objeto de props, que dependen todas entre sí. Puedes agregar esta sintaxis genérica aquí e incluso asegurarte de que corresponda a algo en particular. Entonces, si siempre quieres pasar un ID aquí, entonces va a imponer esa propiedad allí. Entonces ahora estamos diciendo que T row debe extender ID número. Esta palabra clave extends es realmente horrible, aparece en un montón de lugares. Pero lo que significa es que esto está restringido a ser esta forma ahora. Entonces, si no paso un ID aquí, me va a gritar porque las props ID nombre no son asignables al tipo ID número. Y ahora tengo que pasar ID, y eso significa que siempre tendré una clave aquí también. Muy, muy útil. Entonces, esta idea es básicamente un genérico en una prop del componente. Y es realmente poderoso para sincronizar tipos juntos en el mismo componente, básicamente, para que termines con estos contratos dinámicos realmente poderosos. Puedo reutilizar mis componentes de tabla en diferentes lugares. Y sin importar qué datos esté pasando el componente podrá entenderlo.

8. Tipos integrados de React y useState

Short description:

Los tipos integrados de React, mantenidos por separado de React en sí mismo, pueden causar confusión. Pasar un argumento de tipo a useState puede asegurar que el estado esté tipado correctamente. La primera renderización puede resultar en indefinido si no se pasa ningún valor. Es esencial comprender las definiciones de tipo para hooks como useState para aprovechar su funcionalidad.

Porque realmente esto es solo un envoltorio alrededor de esta función de renderización de filas. He utilizado este patrón antes en producción y es increíble.

Otra cosa que puede confundirte son los tipos integrados de React. Estos se mantienen por separado de React en sí mismo. React no está escrito en TypeScript. Creo que está escrito en Flow. Y lo que hace es que tienes que instalar React y luego instalar los tipos de React. Y debido a que no se construyen juntos, a menudo pueden tener comportamientos ligeramente diferentes a los del núcleo de React, no de una manera peligrosa, pero hay cosas en los tipos que React en sí mismo no ha documentado. Y esto puede ser realmente, realmente doloroso.

Entonces, vamos con uno simple aquí, que es digamos que tenemos un número en nuestro estado. Ahora, como se predijo, si comienzas con un número en tu useState aquí, entonces este estado se tipará como número y setState se tipará como número también. Entonces no puedo pasar una cadena a esto, tendré que pasar un número. Y todos estos son parámetros integrados en React, por supuesto, si los usas.

Ahora, ¿qué sucede si en realidad no tengo un valor para pasar aquí, pero aún así quiero que este estado se tipée como número? Bueno, puedes pasarle un argumento de tipo. Y puedes decir, okay, este useState ahora es un número. Y podrías pensar que el estado ahora se tipa como número porque puedo establecer el estado como número, pero no, en realidad se tipa como número o indefinido. Y eso es correcto porque la primera renderización aquí, antes de establecer mi estado, imagina si hago esto en un, sé que esto es una mala práctica hoy en día, no muy de moda, pero digamos que solo establezco mi estado en uno dentro de este useEffect. Bueno, en la primera renderización el estado en realidad será indefinido porque no le estoy pasando nada a esto. Y si en realidad le paso un número, entonces estará definido en esa primera renderización. Ahora, la forma en que puede hacer esto, la forma en que sabe cómo hacer esto es si hacemos clic en you state aquí, terminamos en este archivo muy, muy aterrador. Y por supuesto, inmediatamente he perdido mi lugar donde básicamente estamos dentro de las definiciones de tipo para todos estos hooks. Así que tenemos useContext, tenemos useState, ya sabes, oh, hola chicos, toda la pandilla está aquí. Y lo que tenemos entonces, es una sobrecarga de función en useState. You state se puede llamar de dos formas diferentes dependiendo de lo que quieras, básicamente. Entonces, esta primera sobrecarga aquí, es realmente difícil de leer. Así que déjame dividirla un poco. Lo que está sucediendo es que useState, es una función genérica, ya hemos visto una genérica antes. Y está diciendo que el estado inicial es este S o una función que devuelve S. No guardes mis cambios, por favor. No quiero ser responsable de romper nada.

9. Understanding useState and useRef

Short description:

En useState, si no se proporciona un argumento de tipo, el tipo de retorno puede ser S o indefinido. Es importante usar useState correctamente para evitar tipos indefinidos inesperados. useRef tiene múltiples sobrecargas, incluyendo una donde se pasa el valor inicial y devuelve un objeto ref mutable. Otra sobrecarga acepta un argumento de tipo de número y nulo, evitando la reasignación. Comprender el uso de nulo en useRef es crucial para controlar las refs en el desarrollo de React. Si quieres aprender más sobre TypeScript y React, no dudes en conectarte conmigo en Twitter.

Entonces eso significa que puedo pasar este argumento de tipo y puedo tener una función que devuelve un número o simplemente puedo pasar el número en sí. Hasta ahora tiene sentido. Ahora, la segunda sobrecarga dice que si no paso nada, entonces lo que se devuelve es S o indefinido, mientras que aquí arriba, era solo S. Y lo que eso significa entonces es que si no paso nada aquí, terminaré con número o indefinido. Y solo hay dos sobrecargas en useState, lo cual es bastante bueno, pero es muy importante hacerlo bien para no terminar con indefinido invadiendo accidentalmente tus tipos.

Lo realmente horrible, sin embargo, es useRef. Así que vamos a useRef como si fuera un error realmente desagradable. Es un debug. Inmediatamente. Asqueroso. Objeto ref mutable, objeto ref heredado. Blah, blah, blah. Y la solución a esto es profundamente contraintuitiva. ¡Whoa! Ahí lo tienes, eso es todo. ¿Por qué funciona? Bueno, si vamos a useRef, entonces veremos que hay varias sobrecargas en useRef, donde tenemos tres sobrecargas. Tenemos un useRef donde el valor inicial es t y se pasa y terminas con un objeto ref mutable. Entonces, si miramos dentro, ¿dónde está? Aquí está. Tenemos nuestro número aquí y luego Sobrecarga1, terminas con un objeto ref mutable de React. Entonces, si digo Sobrecarga1.Current, puedo asignarle algo diferente, pero en Sobrecarga2 aquí, si paso un número o lo siento, si paso un argumento de tipo de número, pero paso nulo, puedo decir Sobrecarga2.Current es igual a tres o lo que sea, no puedo reasignarlo. ¿Qué? Quiero decir, esto se ve exactamente igual. Seguramente esto debería tener un tipo como Sobrecarga2 es como cosa o nulo, ¿verdad? Bueno, te mostraré por qué sucede esto en un segundo o por qué está aquí. Y si no paso nada, entonces me permitirá ser mutable nuevamente. Entonces Sobrecarga3.Current es igual a dos. La razón por la que esto está en su lugar es para que, como hay algunas refs que React necesita controlar y hay algunas refs que puedes controlar. Y en general, las que React quiere controlar es donde las estás pasando directamente al desarrollo básicamente. Y la forma en que React te dice que hagas esto es con esta propiedad nulo. Entonces, si no pasas nulo, te gritará pero si pasas nulo, también te gritará. Y este tipo de refs de uso son realmente importantes de entender porque esto realmente puede causarte mucho dolor en términos de cuando estás usando React y usando estas refs.

Pero creo que básicamente se me acabó el tiempo. Si quieres aprender más sobre esto entonces ven a hablar conmigo después y encuéntrame en Twitter y hazme preguntas sobre TypeScript y React. Hay mucho en lo que puedes sumergirte y es un tema realmente, realmente profundo. Pero realmente creo que puede ser un matrimonio exitoso si resuelves estas dificultades y realmente comprendes de dónde vienen ambas partes. Gracias.

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