Skip to content

nuqs vs Zustand

Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.

nuqs

Open source · MIT

A React hook that keeps component state in the URL query string, like useState but in the address bar.

Zustand

Open source · MIT

A small React state-management library built on hooks, with no providers needed.

The short answer

Choose nuqs if you need…

  • React developers building filterable, searchable or paginated pages
  • Teams using Next.js (app or pages router) who want type-safe search params
  • Apps where users should be able to bookmark or share a view's state
  • Projects already on React Router v6+/v7/v8 or Remix who need URL-synced state

Choose Zustand if you need…

  • React developers who want simpler shared state than Redux
  • Apps that need state shared across many components without wrapping them in providers
  • Projects that need to read or update state outside components via getState and setState
  • Developers who want fine control over which state changes trigger re-renders

Side-by-side

nuqsZustand
TypeLibraryLibrary
PriceFree and open sourceFree and open source
LicenceMITMIT
GitHub stars10.9k58.9k
Setup difficultyBeginnerBeginner
How you get itInstall with a package managerInstall with a package manager
Main languageTypeScriptTypeScript
Last code update4 days ago15 days ago

What each one is

nuqs

nuqs is a TypeScript library for React apps that stores state in the URL's query string instead of in memory. You use it much like React's useState: you get a value and a setter, but the value appears in the address (for example ?name=foo), so it survives page reloads and can be shared as a link. It provides adapters for Next.js, plain React, Remix, React Router and TanStack Router.

Zustand

Zustand lets React apps keep shared state in a store that components read through a hook. Components subscribe to just the pieces they select and re-render only when those pieces change. The README says it needs no context providers and has a small API, and it can also be used without React.

Best for

nuqs

  • React developers building filterable, searchable or paginated pages
  • Teams using Next.js (app or pages router) who want type-safe search params
  • Apps where users should be able to bookmark or share a view's state
  • Projects already on React Router v6+/v7/v8 or Remix who need URL-synced state

Zustand

  • React developers who want simpler shared state than Redux
  • Apps that need state shared across many components without wrapping them in providers
  • Projects that need to read or update state outside components via getState and setState
  • Developers who want fine control over which state changes trigger re-renders

Strengths

nuqs

  • Simple model: the URL becomes the source of truth for the state
  • Built-in parsers for types such as integers, floats, booleans and Dates, plus support for custom parsers
  • Supports several frameworks and routers through adapters, with an MIT license

Zustand

  • Small, simple API based on hooks, with no providers required
  • Components re-render only when the selected state they read changes
  • Works with async actions and can be used outside React

Not ideal for

nuqs

  • Projects that do not use React or a supported framework, since the library and adapters are React-specific
  • Sensitive data, because anything stored in the query string is visible in the URL and browser history
  • Projects on Next.js older than 14.2 without pinning to nuqs v1, as the README says the adapter code needs 14.2 or later

Zustand

  • Teams that require Redux's conventions, tooling, and strict structure, since the README describes zustand as un-opinionated
  • Projects not using React or JavaScript, since the README focuses on JavaScript and React usage and the vanilla core is only a secondary option
  • Adding state inside React Server Components, which the README explicitly advises against because it can cause bugs and privacy issues

Trade-offs

nuqs

  • Only works in client components in Next.js, and the README notes TanStack Router support is experimental and does not cover TanStack Start
  • Values in the URL are visible and user-editable, so it is unsuitable for secrets
  • Requires wrapping your app in a framework-specific adapter, which adds setup that differs by router

Zustand

  • The README says to set state immutably and be careful when replacing state, which takes care to get right
  • Some patterns, such as fetching everything or using custom equality, can cause extra re-renders or require extra setup
  • Documentation for the migration to v5 and TypeScript usage is referenced but not included in the truncated README

Getting started

nuqs

Install with npm

npm install nuqs

Install with pnpm

pnpm add nuqs
Step-by-step guide: how to use nuqs

Zustand

Install zustand from npm

npm install zustand
Step-by-step guide: how to use Zustand

Frequently asked questions

What is the difference between nuqs and Zustand?

nuqs: A React hook that keeps component state in the URL query string, like useState but in the address bar. Zustand: A small React state-management library built on hooks, with no providers needed. nuqs suits react developers building filterable, searchable or paginated pages, while Zustand suits react developers who want simpler shared state than redux.

Are nuqs and Zustand free?

nuqs: Free and open source. Zustand: Free and open source.

Is nuqs or Zustand more popular?

Zustand has more GitHub stars (58.9k) than nuqs (10.9k). Popularity isn't the same as fit — check which one matches your use case above.

What are other alternatives to nuqs and Zustand?

Other options people compare them with include TanStack Router, Kysely, Redux, Jotai, Valtio.

Keep comparing

Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.