React Query y Auth: ¿Quién es responsable de qué?

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

React Query gestiona el estado del servidor en el cliente, y auth gestiona el inicio de sesión/registro/cierre de sesión del usuario. ¿Dónde se superponen estos dos, y cómo separas las preocupaciones? Esta charla propone un flujo de datos con hooks personalizados tanto para auth como para React Query para gestionar el estado de autenticación y las actualizaciones del perfil del usuario.

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

FAQ

React Query es una biblioteca cuyo trabajo principal es mantener el estado del servidor en el cliente, creando una caché de datos del servidor en el cliente. Permite sincronizar los datos con el servidor y actualizarlos según ciertos disparadores como reconexiones de red o cambios en el enfoque de la página.

Las mutaciones en React Query se utilizan para enviar actualizaciones de datos al servidor. A diferencia del gancho useQuery, que se emplea para obtener datos, useMutation permite modificar datos en el servidor y es crucial para mantener la precisión de los datos mostrados en el cliente.

React Query puede integrarse con mecanismos de autenticación y usar el almacenamiento local para la persistencia de datos, asegurando que los datos del usuario se mantengan actualizados y sincronizados, incluso si el usuario actualiza sus datos desde otro navegador o dispositivo.

UseAuth es un hook en React Query que maneja las funcionalidades de inicio de sesión, registro y cierre de sesión del usuario. Este hook trabaja con autenticación basada en tokens JSON, manejando tanto la recepción del token como los datos del usuario en las respuestas del servidor.

React Query aborda este problema mediante el uso de consultas dependientes y desactivando consultas si no hay un usuario válido. Esto permite manejar situaciones donde se necesita un ID de usuario para realizar consultas, pero ese mismo ID se obtiene de los datos del usuario.

Existen bibliotecas como React Query Auth y React Query Firebase que facilitan la integración de React Query con sistemas de autenticación. React Query Auth es un envoltorio ligero que proporciona funciones de inicio de sesión, mientras que React Query Firebase maneja la autenticación utilizando Firebase y almacena los datos directamente en la caché de React Query.

Bonnie Schulkin
Bonnie Schulkin
19 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla presenta React Query y Auth, discutiendo cómo React Query mantiene el estado del servidor en el cliente y maneja las mutaciones y actualizaciones de datos. El ejemplo de la aplicación de spa de día demuestra el uso de React Query para obtener datos y manejar la autenticación del usuario. React Query también es útil para gestionar los datos del usuario y asegurar datos precisos desde el servidor. La charla destaca la importancia de abordar los tres principales actores en los datos del usuario: React Query, Funciones de Auth, y persistencia a través de las sesiones.

1. Introducción a React, Query y Auth

Short description:

Hola, gracias por venir a esta charla sobre React, Query y Auth. Me gustaría presentarme y dar algunas notas. El enfoque aquí es manejar a todos los jugadores interesados en la información del usuario y apagado. Al final, hablaré de un par de bibliotecas npm que puedes usar. Puedes encontrar las diapositivas en mi sitio bany.dev slash talks.

Hola, gracias por venir a esta charla sobre React, Query y Auth. Así que React, Query y Auth se superponen en cierta medida, y esta charla va a discutir quién es responsable de qué. Así que primero me gustaría presentarme con este increíble avatar steampunk que React Advanced hizo para mí. Es mi nueva cosa favorita. Mi nombre es Bonnie Shulkin, y he estado en la industria del software alrededor de 20 años. He ocupado muchos roles, pero actualmente soy desarrolladora y formadora. Puedes encontrarme en bonnie.dev, que está en la esquina inferior derecha de todas estas diapositivas. En Twitter, estoy en bonnie.dev con el punto escrito, y estoy increíblemente orgullosa de tener el handle @Bonnie en GitHub. Para introducir esta charla, quiero dar algunas notas. La primera es que aquí voy a hablar de conceptos y realmente no voy a introducir code. Si estás interesado en el code, tendré un enlace al ejemplo de code al final. El enfoque aquí es realmente hacer mi propio sistema para manejar a todos los jugadores que están interesados en la información del usuario y apagado. De esta manera podemos entender todas las piezas. Pero al final, hablaré de un par de bibliotecas npm que puedes usar. Y finalmente, si eres alguien a quien le gusta hacer clic en enlaces de charlas o si te gusta seguir las diapositivas puedes obtener estas diapositivas en mi sitio bany.dev slash talks y puedes buscar la charla de React advanced. He hecho algunos juegos de palabras en algunas de las imágenes que puedes buscar si te gusta ese tipo de cosas.

Read also

2. Introducción a React Query

Short description:

Voy a presentar React Query y la aplicación para esta charla. React Query es una biblioteca que mantiene el estado del servidor en el cliente al almacenar en caché los datos del servidor. Tiene herramientas como el gancho use query para buscar datos y el gancho use mutation para actualizar datos en el servidor. Las consultas dependientes pueden activarse o desactivarse en función del valor de una expresión.

Entonces, aquí hay una tabla para la tabla de contenidos. Primero, voy a presentar React Query para las personas que no conocen esta increíble biblioteca. Luego hablaré sobre la aplicación para esta charla y qué tipo de suposiciones de authentication utiliza.

Hablaré sobre la solución que tengo para fusionar React Query y Auth. Y luego hablaré sobre esas bibliotecas NPM que mencioné.

Entonces, comencemos hablando sobre React Query. React Query es una biblioteca cuyo trabajo es mantener el estado del servidor en el cliente. Así que hace esto creando una caché de datos del servidor en el cliente. Una de las principales herramientas de React Query es el gancho use query. Y este gancho toma una función de consulta que es responsable de obtener los datos del servidor. Para suscribirse a esos datos, el código de React ejecuta el gancho use query. Ahora, parte del trabajo de React Query es asegurarse de que los datos estén sincronizados con el servidor. Así que use query actualiza los datos del servidor. Extrae nuevos datos del servidor dependiendo de algunos disparadores. Algunos de ellos son automáticos, como una reconexión de red o si la página está enfocada. También puedes invalidar manualmente los datos en la caché y la razón por la que menciono esto es porque hablaremos de eso más adelante en esta charla.

Cuando invalidas manualmente los datos en la caché, entonces use query va al servidor y busca datos frescos. Tengo algunas notas al pie de página aquí. Es una simplificación. React Query es una aplicación bastante sofisticada así que no estoy hablando de muchos conceptos como datos obsoletos y expiración de la caché y así sucesivamente. Hay un par de otros conceptos de React Query de los que me gustaría hablar que son relevantes para esta charla. Uno es las mutaciones. Así que use query es si simplemente quieres buscar datos del servidor. Las mutaciones son si quieres actualizar datos en el servidor y así React Query tiene un gancho use mutation además de un gancho use query. También hay un concepto de consultas dependientes. Así que estas son consultas que puedes activar o desactivar en función del valor de una expresión. Así que si la expresión se evalúa como verdadera, entonces la consulta estará activa y hará todas esas búsquedas de datos como lo hace para mantener los datos frescos. Si está apagado si ese valor es falso, entonces los datos están apagados y no se va a comunicar con el servidor. Debería decir que la consulta está apagada, creo que dije que los datos están apagados.

Ahora me gustaría hablar sobre la aplicación para la que escribí esta solución.

3. Aplicación Day Spa con React Query y Auth

Short description:

Esta es una aplicación de un spa de día que utiliza React Query para obtener tratamientos disponibles, personal y citas del servidor. También incluye una función de inicio de sesión utilizando el hook useAuth, que maneja las funciones de inicio de sesión, registro y cierre de sesión. El servidor utiliza autenticación con tokens web JSON.

Entonces, esta es una aplicación de un spa de día donde puedes reservar masajes, faciales o exfoliaciones, puedes imaginar en qué estaba pensando cuando escribí esto. Así que tiene tratamientos disponibles que necesita obtener del servidor. También tiene personal que necesita obtener del servidor y un calendario de citas. Y hace todo esto a través de React Query. Estos son datos del servidor bastante básicos para React Query. Pero también tiene una función de inicio de sesión, un usuario necesita estar registrado para poder reservar citas. Y por lo tanto tiene un hook useAuth que permite al usuario o que gestiona el inicio de sesión, el registro y el cierre de sesión. El hook useAuth devuelve funciones de inicio de sesión, registro y cierre de sesión que pueden ser utilizadas. Y el servidor utiliza autenticación con tokens web JSON.

4. Propiedad de los Datos del Usuario y Beneficios de React Query

Short description:

Entonces, ¿quién posee los datos del usuario? El usuario que inició sesión puede considerarse como datos del cliente, mientras que los detalles como el nombre y la dirección de correo electrónico son datos del servidor. React Query es útil para las mutaciones y para garantizar datos precisos desde el servidor. Se encarga de la invalidación de la caché y de la obtención de datos actualizados. También ayuda con el inicio de la aplicación al mantener el inicio de sesión a través de las sesiones y manejar las actualizaciones de datos desde diferentes navegadores.

Entonces, esas funciones de inicio de sesión y registro en el hook use off en realidad reciben un token y los datos del usuario en la respuesta del servidor. Y la pregunta es, ¿quién posee estos datos? Así que ahora estamos empezando a entrar en la superposición entre off y React Query. ¿Son estos datos del cliente o del servidor? Bueno, creo que podrías argumentar que el usuario que ha iniciado sesión, el usuario particular que ha iniciado sesión en este cliente, esos son datos del cliente. Pero los detalles del usuario, su nombre, su dirección de correo electrónico, su autorización, esos son datos del servidor. Lamento mucho si puedes oír motosierras. Están talando árboles en el vecindario. Así que los datos del usuario tienen en realidad muchas partes que tienen un interés. Use auth está recibiendo esos datos del usuario cuando hace las llamadas al servidor. Y luego los datos del usuario también necesitan ser persistidos en el almacenamiento local porque queremos asegurarnos de que si el usuario refresca la página, por ejemplo, no se cierre automáticamente la sesión. También hay algo interesante sobre use query aquí. La función de consulta va a necesitar usar el ID. Va a necesitar ese ID de usuario para decirle al servidor de quién obtener los datos. Pero necesita los datos para conocer el ID. Por eso tengo este gráfico de pollo y huevo aquí. Necesitas el ID para obtener los datos, pero necesitas los datos para obtener el ID. Esta es una complicación que puede hacer que te preguntes, ¿por qué querríamos incluso involucrar a React Query en absoluto? ¿Por qué no almacenar simplemente los datos del usuario en un contexto y dejar a React Query fuera de la imagen? Tengo un par de razones por las que creo que React Query es una buena idea cuando se trata de datos de usuario. La primera son las mutaciones. El usuario puede actualizar sus datos, pueden actualizar su nombre o su correo electrónico, y queremos asegurarnos de que el cliente está mostrando datos precisos desde el servidor. Imagina esta situación. Imagina que un usuario actualiza sus datos y luego hay un problema, hay un error de red o Dios no lo quiera, hay un error de programación en el servidor y esto impide una actualización. El usuario necesita saber cuál es el estado actual de los datos en el servidor. Con React Query, podemos manejar eso al invalidar ese valor de caché después de la mutación. Luego, React Query irá y obtendrá los datos reales del servidor. Esto actualizará los datos para cualquiera que esté suscrito a esta caché de React Query, incluyendo, digamos, si tienes el nombre de usuario en la barra de navegación. Cualquier componente tendrá los datos más actualizados. La segunda razón por la que creo que es una buena idea involucrar a React Query es para el inicio de la aplicación. La aplicación va a usar el almacenamiento local o algún almacenamiento del navegador para mantener el inicio de sesión a través de las sesiones para que el usuario pueda refrescar la página. ¿Y si el usuario actualizó los datos desde otro navegador? Digamos que ayer, fueron a un navegador diferente en la casa de un amigo y actualizaron los datos. Nuestra aplicación va a parecer torpe si no tenemos esos datos actualizados cuando vuelvan a iniciar sesión desde su nuevo navegador. Debería decir cuando vuelvan a iniciar sesión desde su navegador que estaban usando antes de ir a la casa de su amigo.

5. Gestión de Datos de Usuario y React Query

Short description:

Existe un problema de seguridad al actualizar tratamientos por usuarios autorizados. React Query puede actualizar datos al inicio y manejar el proceso de actualización de datos de usuario. La solución es descentralizar todo con un hook de usuario utilizado que rastrea los datos del usuario y los mantiene en el estado interno del usuario, en la caché de consultas y en el almacenamiento local. El hook de usuario recibe y establece datos de React Query y otras fuentes como el hook de uso de autenticación. El estado del usuario, la función de actualización del usuario y la función de limpieza del usuario manejan las actualizaciones de datos para los tres jugadores. React Query y el hook de uso de autenticación también actualizan los datos. Para más detalles, puedes consultar el repositorio de GitHub para el código. Finalmente, React query auth es una biblioteca npm que vale la pena explorar.

Eso es algo que simplemente hará que la aplicación parezca más sofisticada, pero también hay un problema de seguridad aquí. ¿Qué pasa si teníamos algún usuario en el spa que estaba autorizado para actualizar los tratamientos, e hizo algo realmente mal, y fue despedido. Queremos asegurarnos de que si vuelven a la aplicación, actualizamos sus datos de usuario para que ya no estén autorizados para actualizar esos tratamientos. Es realmente difícil deshacerse de un token en el almacenamiento local, pero React Query puede hacer que podamos actualizar los datos, y podemos asegurarnos de que tenemos datos actualizados al inicio.

Ahora, tal vez te has inclinado hacia el lado de que React Query debería manejar todo. Sin embargo, necesitamos cuidar el uso de la autenticación en el almacenamiento local. Necesitamos conectarlos de alguna manera. ¿Queremos que se suscriban y actualicen la caché de React Query individualmente? Luego también tenemos esa situación del pollo y el huevo para el ID de usuario en la función de consulta.

La solución que he encontrado es descentralizar todo con un hook de usuario utilizado. Esta es la fuente de la verdad. Rastrea los datos del usuario con un estado interno del usuario que se expone como un valor de retorno del hook y esos son los datos canónicos del usuario. Usaremos el almacenamiento local para mantener los datos no solo a través de las sesiones, sino también cada vez que se inicializa un usuario utilizado. También mantendremos los datos del usuario actualizados con el servidor utilizando use query para que cualquiera de esos disparadores que mencioné actualice los datos. Podemos cuidar de esa situación del pollo y el huevo desactivando esa consulta si el usuario es falso. Cada vez que se actualizan los datos del usuario, pasarán por este hook de usuario utilizado. Para asegurarnos de que los datos se mantienen en todas partes donde necesitan estar en el estado interno del usuario, en la caché de consultas, y en el almacenamiento local.

Como me gustan las imágenes, aquí está el hook de usuario utilizado. Recibirá datos de React Query, cuando React Query obtenga datos actualizados del servidor, y también establecerá datos en la caché cuando obtenga datos de usuario de otras fuentes. Otra fuente de la que podría obtener datos de usuario es el hook de uso de autenticación, que recibe datos de inicio y cierre de sesión. El almacenamiento local se está configurando cada vez que se actualizan los datos del usuario, y también está proporcionando el valor inicial para el hook de usuario utilizado. Para profundizar un poco más, el hook de usuario utilizado va a devolver ese estado de usuario para las personas que quieran suscribirse a esos datos de usuario, y luego también va a devolver actualizar usuario, una función de actualización de usuario que toma datos de usuario y actualiza los datos para los tres jugadores. También tendrá un usuario claro, que actualiza los datos para los tres jugadores para que no haya usuario. Actualizar usuario. Y todas las actualizaciones, cualquier actualización de datos de usuario pasa por el uso de usuario. Entonces, cuando React Query actualiza los datos, utiliza la función de actualización de usuario del hook de usuario utilizado. Lo mismo con el hook de uso de autenticación.

Muy bien, esa es mi breve introducción a cómo resuelvo este problema. Si te gustaría ver el código, puedes ir a este repositorio de GitHub y puedes ir a aplicaciones completadas, spa de día perezoso, y cliente en lo que respecta al árbol de directorios. Concluiré esta masterclass hablando un poco sobre las bibliotecas npm que existen. La primera es React Query Auth.

6. React Query Auth y Bibliotecas de Firebase

Short description:

React Query Auth es un envoltorio ligero alrededor de React Query que proporciona datos de usuario, funciones de autenticación y datos de eventos. Utiliza funciones de mutación para iniciar sesión y registrarse, con actualizaciones de caché en caso de éxito. La biblioteca Firebase utiliza useQuery para llamadas de autenticación, almacenando datos en la Caché de React Query y gestionando la persistencia. React Query Auth tiene alrededor de 500 descargas por semana, React Query Firebase tiene unas 30 descargas por semana, en comparación con las 575,000 descargas por semana de React Query. Esta charla enfatizó la importancia de abordar los tres principales actores en los datos de usuario: React Query, Funciones de Autenticación y persistencia a través de las sesiones.

Y aquí está el enlace a ello. Este es un envoltorio bastante ligero alrededor de React Query. Entonces, como usuario de React Query Auth, lo inicializas proporcionando funciones de inicio de sesión, cierre de sesión y registro. Y luego utiliza un proveedor de autenticación separado que toma tu configuración y las funciones de React Query y te proporciona un montón de data y funciones. Así que te da los data del usuario y si hubo o no un error. Luego te da funciones para volver a buscar al usuario, para iniciar sesión, cerrar sesión y registrarse, que es lo que he estado llamando registro. Y luego también te da data sobre si los eventos están ocurriendo actualmente o no.

La forma en que utiliza React Query es que trata el inicio de sesión y el registro como funciones de mutación. Utiliza useMutation para eso porque useMutation te permite ejecutar la función más tarde. Y luego tiene un callback en caso de éxito de estas funciones de mutación para actualizar la caché. Esto no aborda la persistencia en el navegador.

Y aquí, si quieres echar un vistazo al code, como dije, es bastante ligero, en realidad no son tantas líneas de code. También hay una biblioteca de Firebase. Y aquí tienes. Esto en realidad utiliza useQuery para todas las llamadas de autenticación y useQuery toma las funciones de Firebase como las funciones de consulta. Almacena todos los data directamente en la Caché de React Query. Y Firebase en sí, a través de esas funciones de Firebase, gestiona la persistencia en el almacenamiento local y el almacenamiento de sesión, y tiene otras opciones también. Y si te gustaría ver el code para esto, tengo un enlace a eso aquí.

A principios de este mes, ambas bibliotecas todavía están encontrando tracción. Así que puedes ver que React Query Auth tiene alrededor de 500 descargas por semana y React Query Firebase tiene unas 30 descargas por semana, debería decir la parte de autenticación de ella. Puedes comparar esto con alrededor de 575,000 descargas por semana para React Query. Bueno, para concluir esta charla, solo quiero reiterar que la razón por la que esto mereció una charla completa es porque hay tres actores principales cuando se trata de data de usuario. Está React Query, que puede mantener el estado de los data en el servidor. Están las Funciones de Autenticación, que pueden encargarse de recuperar los data iniciales. Y luego está la persistencia a través de las sesiones. Así que puede ser almacenamiento local u otras herramientas de persistencia. Cualquier solución completa necesita abordar a estos tres. Así que muchas gracias por venir a mi charla. Gracias a React Advanced por tenerme y por hacer ese increíble avatar Steampunk.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
React Query API Design – Lecciones Aprendidas
React Advanced 2024React Advanced 2024
26 min
React Query API Design – Lecciones Aprendidas
Top Content
I'm super excited to be here today, giving my first live talk at an in-person conference. Dominik, the maintainer of React Query, walks through the API design decisions, including success stories, trade-offs, and mistakes. Tener Linsley designed React Query's medium-sized query API to be minimal, intuitive, powerful, and flexible. Major versions in open source require marketing efforts, but not primarily for adding new features. TypeScript is crucial for building projects and managing user demands in open source can be challenging. The addition of the max pages option improved performance and avoided unnecessary refetches. Inversion of control gives users flexibility, but mistakes can happen in API design. Open source requires time management and feedback from users. API design is influenced by typing ease and good TypeScript support. Getting involved in open source involves trial and error and joining community platforms like TanStack Discord. Dominik's journey started during the pandemic and he can be found on Twitter, TanStack Discord, and his blog.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.