React State Management

[PanthersHowl]

Select Topic Area

Question

Body

What's the best way to share state between pages in Next.js 15? useState doesn't persist.

[maxvalue-builder]

For app router (Next.js 13+), use these patterns by complexity:

1. Simple (URL state)

// Persists in URL, works across pages
const router = useRouter()
const [tab, setTab] = useSearchParamsState('tab', 'all')

// ?tab=all persists navigation

2. Client-side only (Zustand - 2KB)

// store/user.ts
import { create } from 'zustand'
export const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user })
}))

// Any component: useUserStore((state) => state.user)

3. Server-side (Next.js default)

// Persists via database/cookies
'use server'
export async function updateUser(formData) {
  'use server'
  // Update DB, redirect preserves state
}

Recommendation: URL state for filters/tabs, Zustand for UI state, server actions for data.

[abdul0325]

useState is local to a component, so it resets when that component unmounts. For shared state across pages, use React Context, Zustand, or Redux. If the state should survive refreshes, store it in URL params, cookies, or a database. Zustand is a great default choice for most Next.js apps.