Shadcn.io is not affiliated with official shadcn/ui
React useLocalStorage Hook
React useLocalStorage hook for persistent state. useState API, JSON serialization, cross-tab sync, SSR safe. TypeScript ready.
React useLocalStorage Hook preview
Persist React state to localStorage with useState-like API. useLocalStorage returns value, setter, and remove function—data survives page refresh. Auto-serializes with JSON, supports custom serializers for complex types. Syncs across browser tabs via storage events. Returns initial value during SSR. Handles errors gracefully—falls back to initial value if localStorage is unavailable or corrupted. Perfect for user preferences, form drafts, theme settings, or any persistent UI state. Works with Next.js App Router, SSR frameworks, and incognito mode. TypeScript generics for type-safe storage.
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-local-storage hook into my projectRelated Components
React useSessionStorage Hook
Session-scoped persistent state
React useReadLocalStorage Hook
Read-only localStorage access
React useDarkMode Hook
Dark mode with persistence
React useIsClient Hook
Check if running on client
React useDebounceValue Hook
Debounce state values
React useEventListener Hook
Attach any event listener safely
FAQ
Was this page helpful?
Sign in to leave feedback.