Componentes del Servidor sin Tamaño de Paquete

Rate this content
Bookmark

Los componentes del servidor son una nueva característica emocionante introducida en React 18. Nos permiten aprovechar el rendimiento rápido del servidor al descargar el trabajo detrás de un componente al servidor. ¿Por qué querríamos hacer eso? Porque el servidor tiene acceso directo a la fuente de datos, por lo que la obtención de datos y las llamadas a la API serían realmente rápidas en el servidor. Lo más sorprendente de los RSC es que no agregan ningún kb al paquete del cliente. Entonces, no solo los RSC reducen el tamaño del paquete, sino que también mejoran los tiempos de carga de la página, proporcionando en última instancia una mejor experiencia de usuario. En esta charla hablaré sobre qué son los componentes del servidor en React, por qué los necesitamos. A menudo se confunde a los RSC con el SSR, pero veremos cómo son fundamentalmente diferentes. Crearemos una pequeña aplicación de React utilizando componentes del servidor y veremos los beneficios de rendimiento. También veremos los desafíos que podríamos enfrentar al usar RSC en nuestra aplicación de React normal. Finalmente, profundizaremos en el cerebro de React y veremos cómo suceden las cosas bajo el capó.

17 min
24 Oct, 2022

Video Summary and Transcription

Los Componentes del Servidor de React son una característica reciente introducida por el equipo de React y lanzada con Next.js 12. Permiten renderizar componentes en el servidor, mejorando el rendimiento y la obtención de datos. Los componentes del servidor se pueden utilizar junto con el renderizado en el lado del cliente y proporcionan acceso directo a los recursos del servidor. Sin embargo, todavía se encuentran en la etapa experimental y tienen algunas limitaciones, como no poder utilizar hooks o controladores de eventos. Los desafíos incluyen la importación de componentes del servidor en componentes del cliente y realizar llamadas a API de terceros.

Available in English

1. Introducción a los Componentes del Servidor de React

Short description:

Los Componentes del Servidor de React son una característica reciente introducida por el equipo de React y lanzada con Next.js 12. Hoy hablaré sobre las estrategias de renderizado, el renderizado del lado del cliente y el renderizado del lado del servidor. Luego hablaré sobre los Componentes del Servidor de React, cómo son diferentes del renderizado del lado del servidor y cómo podemos usarlos en nuestra aplicación. También veremos los beneficios de rendimiento al usar los Componentes del Servidor de React. Por último, también hablaré sobre algunos desafíos que pueden surgir al intentar usar los Componentes del Servidor de React en tu aplicación existente. En el renderizado del lado del cliente, el servidor envía un HTML en blanco con una etiqueta de script con el origen bundle.js. Con el renderizado del lado del servidor, el servidor envía un HTML completamente renderizado y el navegador lo compara con la página generada. Uno de los grandes beneficios del renderizado del lado del servidor es una mejora en el FCP. Sin embargo, solo se puede utilizar el renderizado del lado del servidor en la primera carga y el estado de los componentes no se mantiene al cambiar de ruta.

Los Componentes del Servidor de React. Los Componentes del Servidor de React es una característica reciente introducida por el equipo de React y lanzada con Next.js 12. Hoy hablaré sobre las estrategias de renderizado, que son principalmente el renderizado del lado del cliente y el renderizado del lado del servidor. Luego hablaré sobre los Componentes del Servidor de React, qué son los Componentes del Servidor de React, cómo son diferentes del renderizado del lado del servidor y cómo podemos usarlos en nuestra aplicación. También veremos los beneficios de rendimiento al usar los Componentes del Servidor de React.

Luego haremos todo el código, una codificación en vivo y veremos todo en funcionamiento. Por último, también hablaré sobre algunos desafíos que pueden surgir al intentar usar los Componentes del Servidor de React en tu aplicación existente.

Un poco sobre mí, mi nombre es Asima. Soy una Ingeniera Front-End Senior que trabaja en Ámsterdam. En mi tiempo libre, me gusta crear videos de Front-End. Puedes contactarme en LinkedIn, Twitter.

Entonces, finalmente hablando sobre las estrategias de renderizado, tenemos el renderizado del lado del cliente y el renderizado del lado del servidor. En el renderizado del lado del cliente, cuando un usuario solicita un sitio web, el servidor envía un HTML en blanco con una etiqueta de script con el origen bundle.js. Luego, el navegador descarga el archivo JS, se carga React y se envía una solicitud para obtener los datos del servidor. Después de recibir los datos del servidor, el contenido se vuelve visible. Este enfoque funciona muy bien para construir sitios web altamente interactivos para el usuario, ya que puedes volver a cargar los componentes que han cambiado en lugar de volver a cargar toda la página. Sin embargo, el problema surge a medida que enviamos más y más código a nuestro paquete JS. El tamaño del paquete aumenta y el navegador tarda tiempo en descargarlo, lo que provoca un FCP retrasado. Además, con el renderizado del lado del cliente, hay problemas de SEO y no se pueden ejecutar en dispositivos sin JavaScript.

Tenemos otra estrategia, que es el renderizado del lado del servidor. En el renderizado del lado del servidor, cuando un usuario solicita un sitio web, esta vez el servidor envía un HTML completamente renderizado, pero este HTML es estático. Entonces, lo que hace el navegador es que paralelamente también descarga el archivo JS, luego se realiza la comparación entre la página generada por el navegador y la que se envía desde el servidor. Esto es lo que llamamos hidratación. Después de la hidratación, React toma el control y el contenido se vuelve interactivo. Uno de los grandes beneficios que obtenemos del SSR es una mejora en el FCP porque el navegador no tiene que esperar a que el cliente genere un HTML y muestre el contenido al usuario. También se resuelve el problema de SEO, pero uno de los problemas con el SSR es que solo se puede utilizar el renderizado del lado del servidor en la primera carga. Después de eso, después de la hidratación, la aplicación se comporta como una aplicación renderizada del lado del cliente normal. Ahora algunos de ustedes podrían decir que en Next.js, puedes crear múltiples rutas y en cada ruta puedes utilizar el renderizado del lado del servidor. Pero lo que sucede es que al cambiar entre esas rutas, el estado de los componentes no se mantiene. Esta es una de las principales diferencias entre el renderizado del lado del servidor y los Componentes del Servidor de React.

2. Explorando los Componentes del Servidor de React

Short description:

Los componentes del servidor de React se renderizan en el servidor, mientras que algunos componentes se renderizan en el cliente. Esto es diferente al renderizado del lado del servidor, donde todos los componentes se convierten en HTML sin formato y se envían al cliente. Los componentes del servidor de React se pueden usar junto con el renderizado del lado del servidor.

Entonces, hablando de los componentes del servidor de React, como sugiere el nombre, los componentes del servidor de React se renderizan en el servidor. Ahora, el objetivo final para el navegador es generar un árbol DOM. Si estás utilizando el renderizado del lado del cliente, todos los componentes en un árbol DOM de React se renderizan en el servidor. Si utilizas el renderizado del lado del cliente, todos los componentes se renderizan en el cliente. Si utilizas el renderizado del lado del servidor, todos los componentes se renderizan en el servidor. Sin embargo, con los componentes del servidor de React, algunos de los componentes se renderizan en el servidor y algunos se renderizan en el cliente. Y cuando digo que los componentes se renderizan en el servidor, no significa renderizado del lado del servidor. Porque en el renderizado del lado del servidor, lo que sucede es que todos los componentes, ya sea un componente del servidor o un componente del cliente, se convierten en HTML sin formato y se envían al cliente. De hecho, los componentes del servidor de React se pueden usar junto con el renderizado del lado del servidor.

3. Renderización de Componentes en el Servidor

Short description:

Cuando un usuario solicita una página, se puede utilizar el renderizado del lado del servidor para la solicitud inicial, enviando una respuesta HTML. Las solicitudes posteriores pueden ser realizadas por el cliente para los componentes del servidor, que se envían como un objeto similar a JSX. La renderización de componentes en el servidor permite un acceso rápido a los recursos del servidor, una recuperación de datos más rápida y una mayor seguridad.

Entonces, lo que puedes hacer es que cuando un usuario solicita una página, por primera vez puedes utilizar el renderizado del lado del servidor. Y esta vez el servidor enviará un HTML. Y la próxima vez, al cambiar entre las rutas, el cliente puede solicitar un componente del servidor, y esta vez el servidor enviará un objeto similar a JSX, que se ve algo así.

Entonces, si lo miras claramente, la respuesta que estamos obteniendo es parte de los archivos del cliente y parte de los archivos del servidor. Ahora, si prestas atención al archivo del cliente, lo que se envía desde el servidor es solo la referencia del archivo y los fragmentos están vacíos. Sin embargo, con el archivo del servidor, ya se envía y se renderiza desde el servidor.

Ahora, ¿por qué querrías renderizar componentes en el servidor? Uno de los beneficios es que si el componente ya está en el servidor, puede acceder directamente a la base de datos y al sistema de archivos, lo que significa que puede acceder rápidamente a los recursos del servidor, lo que significa que la recuperación de data se vuelve realmente rápida en comparación con hacer una llamada de búsqueda desde el cliente. Además, el servidor es bueno para realizar cálculos. Por lo tanto, puedes obtener cálculos más rápidos y también, con fines de security, puedes optar por mantener los datos sensibles en el servidor en lugar de enviarlos al cliente. Por lo tanto, la idea principal detrás de RSC es permitir que el servidor haga lo que mejor sabe hacer antes de entregar las cosas al navegador.

4. Componentes del Servidor y Aplicación de Correo Electrónico

Short description:

Los componentes del servidor permiten una recuperación rápida de datos y un mejor rendimiento. Se pueden utilizar junto con el renderizado del lado del cliente para optimizar la interactividad. Los componentes del servidor no se incluyen en el paquete del cliente, lo que resulta en un tamaño de paquete más pequeño. Proporcionan acceso directo a la base de datos y al sistema de archivos. Los componentes del servidor de React todavía están en la etapa experimental y solo son compatibles en Next.js. Hay reglas que seguir al usar componentes del servidor, como guardar archivos con extensiones específicas y pasar props serializados a los componentes del cliente. Los componentes del servidor no pueden usar hooks ni controladores de eventos. Se requieren pasos de configuración para comenzar a usar componentes del servidor. En esta parte, crearemos una aplicación de correo electrónico con componentes de lista de correo electrónico y cuerpo de correo electrónico.

Entonces, lo que el servidor es bueno en es recuperar datos rápidamente y tener un mejor rendimiento. Por lo tanto, puedes elegir hacer todas las cosas relacionadas con el rendimiento, como la renderización pesada, en el servidor y dejar que el cliente se encargue de la parte de interactividad. Todo el código que hacemos dentro del componente del servidor no se envía al paquete del cliente, lo cual es un gran beneficio en términos de rendimiento porque no agrega ningún KB al tamaño del paquete. Además, obtenemos acceso directo a la base de datos y al sistema de archivos con los componentes del servidor.

Ahora, lo que se envía desde el servidor es el componente del servidor renderizado y los marcadores de posición del cliente. Entonces, cuando ocurre la eliminación de árbol, solo se vuelven a buscar los componentes del servidor, lo que significa que se mantiene el estado de los componentes del cliente. Ahora todos ustedes deben estar sintiendo como que está sucediendo, pero veremos todo en la codificación. Ahora los componentes del servidor todavía están en estado experimental y solo son compatibles en Next.js. Por lo tanto, si quieres probarlos, debes usar Next.js. Hay un marco creado por Hydrogen, por Shopify, que es Hydrogen. Utiliza los componentes del servidor de React y siéntete libre de consultar la documentación, es realmente interesante cómo han utilizado los componentes del servidor.

Ahora hay un par de reglas que debemos seguir cuando necesitamos usar los componentes del servidor de React. Solo los leeré. En primer lugar, debes guardar los archivos con la extensión .server.js y .client.js porque esto le indica a React qué componentes se deben renderizar en el servidor y qué componentes se deben renderizar en el cliente. Por lo tanto, nuestros componentes solo pueden pasar props serializados a los componentes del cliente, lo que significa que no puedes pasar funciones. Los componentes del cliente no pueden importar componentes del servidor y los componentes del servidor no pueden usar hooks como useState o ningún controlador de eventos. También necesitas realizar algunas configuraciones para comenzar a usarlos. Debes instalar nextcanary react-rc y react-dom-rc. Además, en tu next.config.js, debes activar las flags de componentes del servidor también.

Ahora creemos un componente del servidor. Lo que vamos a crear hoy es una aplicación de correo electrónico. Tiene una lista de correos electrónicos y al hacer clic en cualquiera de las tarjetas de correo electrónico, se debe abrir el cuerpo del correo electrónico. En nuestra aplicación hay dos componentes principales. Uno es la lista de correos electrónicos y el otro es el cuerpo del correo electrónico. Primero escribamos el componente de lista de correos electrónicos. Lo primero que haré es recuperar los correos electrónicos. Ahora recorreré los correos electrónicos y para cada correo electrónico mostraré el nombre, el asunto, la descripción y la fecha. Aquí, en lugar de pasar la fecha sin formato, importaré una función y pasaré la fecha formateada. Ahora el componente de lista de correos electrónicos se ve algo así. Lo que voy a hacer ahora es dividir este componente en dos componentes.

5. Estructura del Componente del Servidor

Short description:

Un componente es el componente contenedor utilizado para recuperar datos, y el otro es el componente de vista para todo lo relacionado con la vista. El archivo del servidor se renderiza en el servidor y el archivo del cliente se renderiza en el cliente. No se pueden pasar funciones al componente del cliente.

Entonces, uno es el componente contenedor, que se utilizará para recuperar data, y el otro es el componente de vista, que tendrá todo lo relacionado con la vista. Ahora he dividido este componente en dos componentes. Ahora cambiaré el nombre de los archivos a .server y .client.js, porque quiero que el archivo del servidor se renderice en el servidor y el archivo del cliente se renderice en el cliente. Ahora voy a importar la lista de correos electrónicos, el componente de vista en mi componente del servidor. Ahora, una cosa a tener en cuenta aquí es que en las props, solo puedes agregar aquellas props, que se pueden serializar a través de la red, lo que significa que no puedes pasar ninguna función al componente del cliente. Así es como se ve mi archivo del servidor, y como se renderiza en el servidor, en lugar de fetch, también podemos leerlo desde la base de datos o leerlo directamente desde el sistema de archivos.

6. Recursos, Descripción General de la Aplicación y Desafíos

Short description:

Para obtener más recursos, consulta el blog de Dan Abramov sobre componentes del servidor sin paquetes. Explora la documentación de Next.js y la aplicación en vivo. Nuestra aplicación presenta tarjetas de correo electrónico y mantiene el estado al cambiar de ruta. Los desafíos incluyen importar componentes del servidor en componentes del cliente, usar hooks en componentes del servidor y realizar llamadas a API de terceros.

Para obtener más recursos, puedes consultar el blog de Dan Abramov que introduce componentes del servidor sin paquetes, y luego puedes consultar la documentación de Next.js, y también hay una aplicación en vivo, Next.js ha creado una aplicación a la que puedes hacer referencia para crear tu propia aplicación. Ahora veamos lo que hemos construido hasta ahora. Esta es nuestra aplicación, que son como tarjetas de correo electrónico, y al hacer clic en la tarjeta, se abre el cuerpo del correo electrónico. Ahora veamos qué se envía al cliente. Al hacer clic en la segunda tarjeta, esto es lo que se ve la respuesta, y esto es lo que también vimos en la captura de pantalla. Entonces envía los archivos del cliente, la referencia del nombre de archivo, y esto será utilizado por el navegador para generar el archivo del cliente más adelante, y luego este es un archivo del servidor completamente renderizado, por lo que el servidor está enviando algo como un objeto similar a JSX, La segunda cosa que quiero señalar aquí es que al abrir el webpack, y aquí tenemos componentes, y en los componentes tenemos el cuerpo del correo electrónico, y la tarjeta de correo electrónico y la lista de correos electrónicos. Entonces, si te fijas aquí, todos los archivos que se envían son los archivos del cliente, y no hay archivo del servidor, por lo que ninguno del código del servidor se envía al paquete del cliente. Otra cosa a tener en cuenta aquí es que, al marcarlo como importante, ahora cambiaré a otra ruta. Así que voy a marcar como importante la segunda ruta. Ahora mi ruta cambia, ¿verdad? Entonces se abre el correo electrónico slash dos, pero el estado se ha mantenido, por lo que se ha mantenido lo importante anterior. Pero si estuvieras usando solo el Next.js sin los componentes del servidor de React, lo que sucedería es que se actualizaría toda la página, por lo que habríamos perdido el estado. Entonces, no importa cuántas rutas cambiemos, se mantiene todo el estado. Ahora hablemos de algunos de los desafíos a los que podemos enfrentarnos al usar componentes del servidor. El primer desafío es que los componentes del cliente no pueden importar componentes del servidor. Y lo que quiero decir es que supongamos que tenemos un componente del cliente, mi componente del cliente, y tratemos de importar un componente del servidor, pero esto no funciona. Entonces, en lugar de usarlo así, lo que podemos hacer es usar la composición. Entonces podemos pasar el componente del servidor como hijos. Y así es como lo usaremos. Podemos componer el componente del servidor de React dentro del componente del cliente. El siguiente desafío al que puedes enfrentarte es usar hooks dentro de los componentes del servidor porque se renderizan en el servidor. Entonces no puedes usar state, useEffect, nada. Así que asegúrate de que cuando quieras usar estados, divides tus componentes en componente del cliente y componente del servidor. Así puedes dejar todos los estados y dejar que vayan a un componente del cliente. Y el otro desafío más grande es hacer una llamada a una API de terceros dentro de los componentes del servidor. Porque al hacer la llamada a terceros también se necesita renderizar los data en el servidor. Y luego puedes pasar los data renderizados a tu componente usando get static props si estás usando Next.js. Ahora, veamos por qué necesitamos un marco de trabajo. ¿Por qué queremos usar Next.js para usar componentes del servidor de React? Y eso es porque para los componentes del servidor de React, necesitamos configuraciones en todos los niveles, que son el renderizado, el enrutamiento y también el empaquetado. Y Next.js proporciona todas esas configuraciones internamente en este momento. Y por eso el equipo de React ha decidido lanzar los componentes del servidor de React con los marcos de trabajo. Entonces, esto es cómo se ve nuestro código, nuestra estructura de carpetas. Cada componente tiene un archivo del cliente y un archivo del servidor. Entonces tendremos dos archivos del servidor, y los dos archivos del cliente que se renderizan en el cliente. Así que ahora podemos decir prácticamente que cada desarrollador de front-end es un desarrollador full-stack. Gracias por asistir a mi charla. Puedes contactarme en Twitter o LinkedIn, y aquí está el enlace a las diapositivas. La aplicación de correo electrónico también está en GitHub, así que no dudes en echarle un vistazo.

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 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
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 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 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.

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