State & Context·loomora → useStorageState
⚙Related configs↗useStorageState
A useState-like hook that persists state to web storage or cookies, handles cross-tab storage event updates, and serializes/deserializes JSON objects automatically.
Interactive live playground
Interact with the hook state and inspect computed return values in real time.
Stored in localStorage
Hello Loomora
Key: loomora_playground_state
Synchronized across browser tabs via useSyncExternalStore.
Storage Controls
Draft Value"Hello Loomora"
How to call
Import directly from the Loomora root package in any React client component.
import { useStorageState } from 'loomora'
export function Example() {
const [user, setUser, removeUser] = useStorageState('user_profile', {
type: 'local',
json: true,
fallback: { name: 'Guest' },
})
return (
<div>
<p>Hello, {user.name}!</p>
<button onClick={() => setUser({ name: 'Alex' })}>Log In</button>
<button onClick={removeUser}>Clear</button>
</div>
)
}Return values & methods
API signatures and utilities returned by this hook.
| Method / Prop | Type | Description |
|---|---|---|
| [0] value | T | Current stored value or fallback. |
| [1] setValue | (next: T) => void | Updates the stored value across memory and browser storage. |
| [2] removeValue | () => void | Deletes the key from browser storage and resets to fallback. |