Is there anyway to use Zustand with React Router v7 ( Framework mode / SSR )

[Lunrk]

Hello there !

I would like to know if there is any recommanded way to implement zustand for client side only in a React Router v7 app, I tried adding a Zustand store to some of my page / components but then I just get SSR error... May be this is not the right place and I should be asking on react router repo, but I was thinking may be some of you can get the answer !

Thanks a lot for your help

[dbritto-dev]

@Lunrk would you mind creating a demo on stackblitz, I'd be happy to help

[Lunrk]

kk wait imma try !

[Lunrk]

tried opening my github repo on stackblitz but I'm not sure how to add pnpm in the stackblitz env as my project is meant to use pnpm

[dbritto-dev]

@Lunrk you can use the terminal like any other env, just click plus button that would open another terminal where you can type whatever you want

[Lunrk]

Nevermind I found the solution, I guess I'm just stupid fr XD
I tried to add Zustand as client code in react router when I just needed to add it the classic way

[Lunrk]

Found that trying to setup the Stackblitz

[Adit-Jain-srm]

The SSR error happens because Zustand stores hold state in module-level singletons, which get shared across requests on the server (causing state leaks between users).

Recommended pattern for Zustand + React Router v7 (framework/SSR mode):

// store.ts — create a store factory, NOT a singleton
import { create } from 'zustand'

export const createAppStore = () => create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}))

export type AppStore = ReturnType<typeof createAppStore>

// context.tsx — provide store per-request via React context
import { createContext, useContext, useRef } from 'react'
import { useStore } from 'zustand'
import { createAppStore, type AppStore } from './store'

const StoreContext = createContext<AppStore | null>(null)

export function StoreProvider({ children }: { children: React.ReactNode }) {
  const storeRef = useRef<AppStore>()
  if (!storeRef.current) {
    storeRef.current = createAppStore()
  }
  return (
    <StoreContext.Provider value={storeRef.current}>
      {children}
    </StoreContext.Provider>
  )
}

export function useAppStore<T>(selector: (state: ReturnType<AppStore['getState']>) => T) {
  const store = useContext(StoreContext)
  if (!store) throw new Error('Missing StoreProvider')
  return useStore(store, selector)
}

// root.tsx — wrap your app
import { StoreProvider } from './context'

export default function App() {
  return (
    <StoreProvider>
      <Outlet />
    </StoreProvider>
  )
}

This pattern:

• Creates a fresh store per request (no cross-request leaks)
• Works with React Router v7's SSR
• The store is client-side only after hydration

@Lunrk The key insight is: never use create() at module level in SSR — always use a factory + context pattern.