Simplificando la gestión de datos en React con React Query

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Esta charla trata sobre cómo React Query puede simplificar la gestión de datos en las aplicaciones de React. La charla cubre los conceptos básicos de React Query, incluyendo sus características para la obtención y actualización de datos, el manejo de actualizaciones optimistas, la composición de consultas y mutaciones, y la gestión de errores y reintentos. Al final de la charla, los asistentes tendrán una clara comprensión de cómo React Query puede mejorar la experiencia del usuario y reducir el código repetitivo en sus aplicaciones de React.

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

FAQ

Harsh es el CTO en una empresa llamada Parallels Up, defensor de Polygon, ha participado en 2x G-SoC y es parte de la iniciativa del MIT Media Lab.

La gestión del estado global en React se refiere a cómo se maneja un estado a nivel global, permitiendo definir y usar una variable global en todo el Estado de React.

React Query es una biblioteca que ayuda a manejar la obtención de datos mediante la captura y optimización de solicitudes de consulta, manejando automáticamente el estado de obtención de datos y su caché.

Los hooks en React Query, como useQuery y useMutation, son funciones que permiten manejar la obtención y manipulación de datos de fuentes externas, simplificando la gestión y mutación de estados dentro de aplicaciones React.

La desduplicación de solicitudes en React Query se refiere al proceso de prevenir llamadas múltiples a la misma API, optimizando así el uso de recursos y mejorando la eficiencia de las consultas.

React Query es ideal para implementar paginación, carga perezosa y desplazamiento infinito, optimizando la gestión de estas funciones sin complicar el estado ni las consultas de la aplicación.

Las mutaciones en React Query se utilizan para crear, actualizar o eliminar datos a través de llamadas API, utilizando el hook useMutation para manejar la respuesta y actualizar el estado de la aplicación.

La cache de consultas en React Query permite almacenar temporalmente los datos de consultas previas, reduciendo la necesidad de repetir solicitudes y mejorando el rendimiento y la velocidad de las aplicaciones.

Harsh Shah
Harsh Shah
16 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy introduce React Query, una biblioteca que simplifica la gestión de datos en las aplicaciones de React. Cubre los conceptos y características principales de React Query, incluyendo la obtención de datos, el almacenamiento en caché y la mutación. La charla también discute la invalidación de consultas y el tiempo de caché, destacando cómo React Query optimiza el rendimiento y reduce la complejidad del código.

1. Introducción a React Query y la gestión del estado

Short description:

El tema de hoy es simplificar la gestión de datos utilizando una consulta de proyecto. React Query es una biblioteca útil que simplifica la obtención de datos y la gestión del estado. Proporciona varios hooks y maneja la carga, el error, la precarga y la desduplicación de solicitudes. Vamos a sumergirnos en React Query y explorar sus características.

Hola, así que hola a todos. Así que hoy voy a hablar sobre simplificar la gestión de data en utilizando una consulta de proyecto. Así que esto es una pequeña cosa sobre mí. Mi nombre es Harsh. Soy CTO en una empresa llamada Parallels Up. También soy un defensor de Polygon. También he hecho 2x G-SoC. También formo parte de la iniciativa del MIT Media Lab. Estas son las siguientes cosas que estoy haciendo en la community y trabajo con muchas startups y empresas globales.

Entonces, sí, vamos rápidamente a lo que es la React State Management. Hay dos tipos de gestiones de estado. Una es la gestión del estado global, otra es la obtención de data. La gestión del estado global es básicamente cómo estás gestionando un estado a nivel global. Como puedes pasar una variable global y puedes definir el estado y puedes usarlo en el Estado de React. Y uno es la obtención de data. La obtención de data es que puedes obtener la data utilizando APIs u otros formatos JSON en la cabeza, y basado en la obtención de data haces una consulta y pasas la data y mapeas la data.

Así que es una afirmación muy simple tener la gestión del estado en React. Entonces podemos pasar a React Query, que queremos aprender aquí. React Query es una biblioteca útil que ayuda a gestionar nuestra obtención de data utilizando la captura y optimizando nuestras solicitudes de consulta y todo. React Query se desarrolla muy fácilmente para obtener, actualizar data utilizando varias fuentes y la biblioteca maneja automáticamente tu estado de obtención de data y captura. Hay varios hooks disponibles en React Query. Así que vamos a ver uno por uno qué tipo de hooks y qué cosas están disponibles en React Query. Así que antes de saltar a React Query, entendamos cómo funciona una consulta normal o cualquier tipo de consulta. El primer estado de React Query es básicamente un estado de carga o error. Cuando obtienes cualquier tipo de data, primero es como si data es enorme, pones una carga o data no se obtiene, pones un estado de error o algo así como algo así como try-catch o promesas algo. Y luego el segundo paso es como la precarga. La precarga es pre-cargar tus data antes de renderizar las data reales en el lado de un móvil o cualquier cosa. Así que es como precarga, solicitud de pre-vuelo. La desduplicación de una solicitud es básicamente cuando haces una simple llamada a la API y está llamando a la API varias veces. Es como una llamada a la API de pre-vuelo primero para comprobar si los data están llegando o no.

Read also

2. Conceptos y Características de React Query

Short description:

Se cubren el desplazamiento inicial y el desplazamiento infinito de la página, la mutación, el reintento y el error, y los cuatro conceptos principales de ReactQuery. Las principales características incluyen la obtención y almacenamiento en caché de datos, la actualización de datos en segundo plano, el uso optimizado de la memoria y el soporte para paginación, carga perezosa y desplazamiento infinito. React Query proporciona hooks como UseQuery y QueryClientProvider para obtener datos. Se utiliza el parámetro UniqKey y la notación de array en la última versión de la consulta.

Y la segunda llamada es como la confirmación de data. El desplazamiento inicial y el desplazamiento infinito de la página es uno de los mayores ejemplos de personas que están utilizando Great Query y state management. El desplazamiento inicial y el desplazamiento infinito de la página es una de las cosas difíciles de hacer a veces porque cuando los data son enormes, necesitas complicar y cortar y hacer todo y gestionar tu estado y consultar todo data. La mutación es en última instancia duplicaciones. Y el reintento y el error es como, intenta si data se está obteniendo no está obteniendo error, intenta de nuevo. Por eso intentaré y buscaré.

Así que pasemos a los conceptos principales. ¿Cuáles son los conceptos principales en las consultas de react? Así que hay cuatro conceptos principales en la consulta de react. Uno es la consulta, en la que solicitas los data de una fuente remota como puntos de API o database y utilizando un hook de react query, puedes obtener todas las consultas. El segundo es las mutaciones, donde añades la solicitud en la llamada de API y puedes modificar los data existentes utilizando los simples hooks llamados useMutation hooks. El tercero es la captura de consultas. Cuando estás haciendo una consulta, quieres hacer algún tipo de captura como obtener los data de la API en sí. Así que ReactQuery proporciona automáticamente la función de captura de ReactQuery y almacenan tu resultado como una captura y puedes usar la captura de varias maneras. Y la validación de consultas es el proceso de hacer una consulta para un estado inválido en todo. Y estos son los cuatro conceptos principales de ReactQuery.

Bueno, así que pasemos a la característica principal de ReactQuery. La característica principal es para ReactQuery por qué usamos, queremos usar ReactQuery o por qué ustedes quieren usar ReactQuery en lugar de la otra declaración de Google. Uno es la obtención, obtener y capturar data Otra cosa es que puedes usar esos data obtenidos en cualquier lugar de la aplicación en sí. No hay necesidad de definir un estado global y poner data aquí y allá. Puedes actualizar tus data en segundo plano como puedes usar mutaciones y basado en mutaciones puedes actualizar tus data y modificar tus data. La gestión de la memoria es increíble en ReactQuery. Puedes eliminar o puedes, cualquier data que no estés utilizando Optimiza tu uso de la memoria. Para la paginación, la carga perezosa y el desplazamiento infinito Esta es la mejor biblioteca que puedes usar para hacer simplemente paginación, carga perezosa y desplazamiento infinito. No sólo esta función sino que puedes configurar CreateQuery de la manera que quieras Como el enfoque de la ventana o la reobtención o el retraso de la consulta Depende de la consulta que quieras hacer pero esto te ayuda mucho en la gestión de consultas y state management. Aprendamos uno por uno o entendamos uno por uno ¿Cuáles son los hooks principales en una consulta de React? Cuando estamos obteniendo los data uno de los hooks comunes que usamos cuando estamos haciendo una consulta de React es UseQuery puedes ver aquí la consulta de React cuando usas, necesitas ejecutar un hook, se llama QueryClientProvider Es en última instancia un envoltorio que es una herramienta que te ayuda a consultar utilizando UseQuery y el componente hijo en sí. Así que hay dos parámetros únicos que necesitas pasar uno es UniqKey y necesitas devolver una función en el parámetro en sí. Tenemos un ejemplo, puedes ver aquí. En una sintaxis simple puedes comprobar, seleccionar const UseQuery. UseQuery es nuestro hook y estamos pasando dos parámetros uno es queryKey y query function es callback function queryKey es un breve, que es UniqKey y en una versión estable o en la última versión de la consulta necesitas usar notación de array. Con notación de array estamos pasando

3. React Query: Consulta, Mutación y Caché

Short description:

Existe una función de consulta que ayuda a los hooks useQuery a obtener datos. El hook useQuery se utiliza para obtener usuarios de forma asíncrona. useMutation permite actualizar y cambiar datos desde el servidor. Devuelve un objeto con propiedades obtenidas de la API. La caché de consultas se utiliza para acelerar la obtención de datos guardando datos anteriores. StaleTime determina cuándo se considera obsoleto el resultado de una consulta.

puedes pasar múltiples arrays. Existe una función de consulta que es una función de devolución de llamada. Que ayuda a los hooks useQuery a obtener o buscar los data en cierto punto. Así es como puedes simplemente, hay una sintaxis y simplemente necesitas pasar dos parámetros queryKey y query function. Este es un ejemplo que es un pequeño ejemplo de cómo puedes usar un useQuery. Usando dos identificadores clave. Identificar cada consulta. Así que aquí hay una simple solicitud, obtener usuarios o buscar algunos usuarios usando una simple llamada asíncrona y lo que estamos haciendo es, estamos obteniendo los data y estamos usando los hooks useQuery aquí y estamos pasando la clave usuarios, queremos usuarios de los data en sí y estamos obteniendo usuarios, que es esta llamada que es una llamada de devolución de llamada. Y en base a eso estamos mapeando todos los datos de usuario aquí. Así que este es un ejemplo muy simple de cómo podemos usar un useQuery

El segundo es useMutation. UseMutation es permite a una react query actualizar o cambiar los data desde el servidor en sí. Puedes actualizar y usar esos data modificados en tu aplicación. Así que los hooks useMutation ayudan a crear, actualizar y eliminar data de la entrada de la API en sí. No necesitas ir a preguntar a tu ingeniero de database o ir a database y eliminar y luego puedes comprobar. Simplemente puedes usar mutación y basado en la entrada de la API puedes eliminar, actualizar o crear cualquier cambio en tus data. Los hooks useMutation requieren al menos una opción. Puedes ver cuáles son las opciones que puedes pasar. Es una sintaxis simple que puedes mirar.

Así que const mutation, useMutation es un hook y función de mutación simplemente estamos pasando cualquier función aquí. Los hooks useMutation básicamente devuelven un objeto, un objeto puede contener varias propiedades que estamos obteniendo de la API en sí. Este es un ejemplo simple. Estamos añadiendo el usuario, usando el useMutation en la API. Este es el punto final de la API. Estamos usando el método post y simplemente estamos pasando el cuerpo, cuáles son los usuarios que necesitamos para actualizar. Estamos usando un mutate básicamente ejecuta nuestras funciones estamos añadiendo este usuario, queremos eliminar, puedes usar eliminar o si quieres simplemente actualizar puedes actualizar. La caché de consultas es otro hook que es una react query en sí. La caché de consultas es cuando estás haciendo useQuery o cualquier otro parámetro de consulta cuando estás obteniendo los data de los servidores remotos o API o database. Para acelerar esa cosa necesitas guardar esos data, data anteriores para simplemente no buscar y no hacer ningún tipo de solicitud porque si haces solicitudes una y otra vez cuesta un servidor no es una buena práctica así que para eso la mayoría de la gente usa una caché y la caché de consultas es una función incorporada de React. Hay 2 propiedades predeterminadas que puedes usar cualquier opción que puedas usar es staleTime y CacheTime. Así que cómo funciona es StaleTime básicamente determina el tiempo que tarda el resultado de una consulta en considerarse obsoleto. Si puedes ver estamos simplemente consultando QSquery la clave es usuarios la función son GETuser y estamos poniendo

4. Tiempo de Caché e Invalidación de Consulta

Short description:

Esta sección discute el tiempo de caché y la invalidación de consulta en React Query. CacheTime determina cuánto tiempo permanecen los datos en caché, mientras que la invalidación de consulta te permite marcar consultas específicas como obsoletas. React Query proporciona hooks como useQueryClient y queryClient.invalidQueries para manejar la invalidación. La biblioteca ofrece una gestión de estado eficiente y características de caché y optimización de memoria incorporadas. Con React Query, los desarrolladores pueden reducir significativamente la complejidad del código y optimizar el rendimiento.

CacheTime es 500. Estos data pueden permanecer durante 5 segundos cuando estás haciendo una llamada a la API. Llamando o buscando los data Luego, si ponemos un CacheTime, es básicamente cuánto tiempo necesitas para atrapar ese resultado. Entonces, si piensas que nuestros data se actualizarán cada minuto o cada 30 minutos o cada 40 minutos. Como todos los días. Puedes poner un temporizador aquí. CacheTime atrapará tus data para cualquier período o cualquier cantidad de minutos que apliques en esto.

Luego pasemos a la invalidación de consulta. Básicamente, el método de invalidación de consulta es usar una consulta específica y un STALE. En STALE puedes marcar el tiempo STALE que vimos anteriormente en QueryCache Si quieres sobrescribir toda la configuración STALE para ser usada en una consulta real, este hook es el que puedes usar. Se usa básicamente en algunas de las condiciones para las que necesitas usar métodos de consulta inválidos. Entonces, cómo puedes usarlo es simplemente puedes importar QueryClient como useQueryClient y básicamente queryClient.invalidQueries e invalidQuery es básicamente cualquier clave que quieras pasar en un use query que básicamente te ayuda a invalidar solo la consulta como que no quieres más variables o subclaves y si pasas como opción verdadera, el método inválido es útil para simplemente pasar consulta inválida data. Hay como estos dos métodos. Entonces, esta función recibe cada consulta instantánea desde el caché de consulta y te permite devolver valores verdaderos o falsos y en base a eso puedes invalidar la consulta data. Entonces, React Query es la robusta biblioteca que te permite una gestión de estado eficiente. Te permite hacer uso de los hooks de React o useQuery o useMutation. Puedes modificar data basado en el punto de la API o el servidor. Además, hay muchas características en el mecanismo de caché incorporado o memoria optimization, caché de memoria. Puedes atrapar los data, robar los data y usando React Query puedes el desarrollador puede reducir significativamente la complejidad del código lo cual nos encanta. Un ejemplo que puedo dar es VR construyendo una aplicación ONE que es una aplicación web 3 pero hay enormes data que vienen del nodo en sí y queremos usar esos datos de consulta y cómo podemos optimizar esa consulta estábamos confundidos y luego usamos React Query y optimizamos más de 1000 líneas en el código en sí para optimizar mucha lógica implementamos caché y todo y usando eso estamos sirviendo a millones de usuarios ahora mismo para un cliente en sí. No es un producto construido sino un producto de cliente y cómo podemos optimizar ese producto usando React Query, ese es uno de los grandes ejemplos que pusimos en producción como equipo. Nos ayudó mucho estamos usando React Query en proyectos frecuentes así que debes intentarlo, si no has probado React Query hay algunos recursos que puedes explorar uno de los buenos recursos que descubrí así que muchas gracias por escucharme, puedes contactarme en twitter o mi correo electrónico, estoy muy activo en twitter sí

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
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.
React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
React Day Berlin 2023React Day Berlin 2023
16 min
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
Top Content
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Workshops on related topic

Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Fetch, useEffect, React Query, SWR, ¿qué más?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, ¿qué más?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras
Gestión del estado en React con Context y Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
Gestión del estado en React con Context y Hooks
Workshop
Roy Derks
Roy Derks
Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.