Type Safe URL State Management in React with nuqs
summary
nuqs is a small library that moves structured state into the URL with type-safe parsers and framework adapters (Next.js app router, React Router v7, Remix). Demo replaces useState with useQueryState for a count example and builds filters with createLoader and createSerializer; URL updates use the history API so clicks produce shallow routing (no network request) and server-aware reads still work. It throttles updates to avoid browser rate limits, maps friendly URL keys, and warns about ~2,000 char/8KB limits.
AI-written summary · about
chapters (20)
- 0:00Introduction and setup
- 1:25What is URL state
- 3:14Superpowers of URL state
- 5:01Drawbacks of URL state
- 7:08Immutable URLs and schema migration
- 8:15Breaking the back button
- 8:59Rate limiting URL updates
- 10:02SEO and canonical URLs
- 11:06When to use URL state
- 12:28Introducing nuqs library
- 13:54Demo basic usage
- 16:44Shallow routing vs SSR
- 17:46Demo server-side rendering
- 20:59Connecting UI to URL state
- 23:53Customizing URL keys
- 26:23Handling breaking changes
- 27:05Generating URLs from state
- 28:15Stitching search params
- 28:56Recap and advanced features
- 30:20Resources and closing
related talks
25mType-safe URL state in with nuqs
30mTypesafe state in your URL
24mGoodbye, useState
41mReact Query: The Next Big Library?
52mManaging Remote State in React
29mReact Query: It’s Time to Break up with your "Global State"!
11mSimple data fetching with React Query
20mReact Query API Design – Lessons Learned