Shadcn.io is not affiliated with official shadcn/ui
React useSessionStorage Hook
React useSessionStorage hook for tab-scoped persistent state. useState API, JSON serialization, SSR safe. TypeScript ready.
React useSessionStorage Hook preview
Persist React state to sessionStorage with useState-like API. useSessionStorage returns value, setter, and remove function—data persists until tab closes. Auto-serializes with JSON, supports custom serializers for complex types. Syncs across same-tab instances via custom storage events. Returns initial value during SSR. Handles errors gracefully—falls back to initial value if sessionStorage is unavailable or corrupted. Perfect for form drafts, wizard progress, temp filters, or any session-scoped UI state. Works with Next.js App Router, SSR frameworks, and incognito mode. TypeScript generics for type-safe storage. Clears automatically when tab/window closes.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-session-storage hook into my projectRelated Components
React useLocalStorage Hook
Permanent persistent state
React useReadLocalStorage Hook
Read-only storage access
React useBoolean Hook
Boolean state with helpers
React useStep Hook
Multi-step wizard state
React useIsClient Hook
Check if running on client
React useEventListener Hook
Declarative DOM events
FAQ
Was this page helpful?
Sign in to leave feedback.