Log in
React Conferences
React Advanced 2025React Advanced 2025
ES

Type-Safe URL State Management in React With nuqs

François Best
François Best
47ng
Video thumbnail
This video will go public in 18 days
Multipass and Full ticket holders have instant access to event recordings.
Please login if you have one.
Get Multipass

Register a free account to unlock access to this video in 3 days.

Bookmark
Rate this content

Hay muchas maneras de gestionar el estado en aplicaciones modernas de React, pero la URL en sí misma es un potente gestor de estado oculto que a menudo se pasa por alto.

Esta charla introduce `nuqs`, una biblioteca que simplifica la gestión del estado de la URL en React. Exploraremos los beneficios de este enfoque: compartibilidad, navegación por el historial e interacción declarativa cliente-servidor.

A través de una demostración en vivo, aprenderás cómo migrar de React.useState a nuqs’ useQueryState mientras navegamos por conceptos como parámetros de búsqueda solo para el cliente frente a los conscientes del servidor. También cubriremos buenas prácticas para URLs bonitas y seguras en cuanto a tipos, y cómo evitar errores comunes como los límites de tasa del navegador y las restricciones de tamaño de URL.

Si alguna vez te has preguntado qué estado pertenece a la URL y cómo escalarlo, esta charla te dará las respuestas.

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

state management
François Best
François Best
30 min
28 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
François West introduce Nux, un gestor de estado de URL para React, que ofrece habilidades de teletransportación y viaje en el tiempo. Nuxt aborda los límites de tasa del navegador en las actualizaciones de URL y crea puntos de entrada en la aplicación al poner el estado en la URL. Nuxt.js permite la renderización del lado del servidor y la creación de interfaces de usuario compartibles con un enfoque declarativo. La fuente de la URL se utiliza como verdad para el manejo del estado y la finalización de la actualización de la URL se realiza en Nuxt.js. Se admite el manejo de parámetros de URL seguros en cuanto a tipos y el análisis de compresión, asegurando la seguridad y la seguridad de enrutamiento con la integración de TanStack.
Available in English: Type-Safe URL State Management in React With nuqs
Video transcription and chapters available for users with access.
Available in other languages:

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
Eduardo San Martin Morote
Eduardo San Martin Morote
Vue.js Core Team
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.
state managementvuepinia react
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
David Khourshid
David Khourshid
Stately
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.
state managementreactreact hook missing dependencybest practices
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
Tanner Linsley
Tanner Linsley
Nozzle.io
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.
react querystate managementreact global statereact state management
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
Daishi Kato
Daishi Kato
Zustand, Jotai & Waku author
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
jotai react nativestate managementweb developmentbuilders and foundersjotai react
Anunciando Starbeam: Reactividad Universal
JSNation 2022JSNation 2022
27 min
Anunciando Starbeam: Reactividad Universal
Yehuda Katz
Yehuda Katz
Tilde, Inc., USA
Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.
state managementframeworks
Pensando en React Query
React Summit 2023React Summit 2023
22 min
Pensando en React Query
Top Content
Dominik Dorfmeister
Dominik Dorfmeister
React-Query maintainer
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
react querystate managementreactpatternsthinking in reactbuilders and foundersreact state managementreact query best practicesreact query dependent queriesreact query caching

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.
react querystate managementreactserver state reactreact state management
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.
state managementreact hooksreact