usePersistedState

Persists the state to localStorage, sessionStorage or any custom storage

Features

• Persist the state to localStorage, sessionStorage or almost anything else implements storage API
• The state factory takes as many keys as needed, so you don't have to call the factory for each variable
• Written with the TypeScript, the definitions go with the library
• No third-party dependencies

Example

1import createPersistedState from '@plq/use-persisted-state'
2import storage from '@plq/use-persisted-state/lib/storages/local-storage'
3
4const [usePersistedState] = createPersistedState('example', storage)
5
6export default function App() {
7  const [count, setCount] = usePersistedState('count', 0)
8  const handleIncrement = () => setCount(prevCount => prevCount + 1)
9
10  return (
11    <div>
12      {count}
13      <button onClick={handleIncrement}>+</button>
14    </div>
15  )
16}

Requirement

To use @plq/use-persisted-state, you must use react@16.8.0 or greater which includes Hooks. The library is fully compatible with React 18 and React 19.

React 19 Compatibility

This library is fully compatible with React 19 and supports all new features:

• Works seamlessly with useTransition for performance optimization
• Compatible with useActionState for form handling
• Supports useOptimistic for optimistic updates

Check out our React 19 examples to see these features in action!

Clear Storage

1import createPersistedState from '@plq/use-persisted-state'
2import storage from '@plq/use-persisted-state/lib/storages/local-storage'
3
4const [usePersistedState, clear] = createPersistedState('example', storage)
5
6export default function App() {
7  const [count, setCount] = usePersistedState('count', 0)
8  const increment = () => setCount(prevCount => prevCount + 1)
9
10  return (
11    <div>
12      {count}
13      <button onClick={increment}>+</button>
14      <button onClick={clear}>Clear</button>
15    </div>
16  )
17}

Use sessionStorage

1import createPersistedState from '@plq/use-persisted-state'
2import storage from '@plq/use-persisted-state/lib/storages/session-storage'
3
4const [usePersistedState, clear] = createPersistedState('example', storage)

Use async storage

1import createPersistedState from '@plq/use-persisted-state'
2// or
3import { createAsyncPersistedState } from '@plq/use-persisted-state'
4import { local } from '@plq/use-persisted-state/lib/storages/browser-storage'
5
6const [usePersistedState, clear] = createPersistedState('example', local)

Use custom storage

The storage API is similar to the browser.storage but with a few differences

1import createPersistedState from '@plq/use-persisted-state'
2
3const storageListeners = new Set()
4
5onChangeSomeStorage(event => {
6  const changes = {
7    [event.key]: {
8      newValue: event.newValue,
9      oldValue: event.oldValue,
10    },
11  }
12
13  listeners.forEach(listener => {
14    listener(changes)
15  })
16})
17
18const myStorage = {
19  get: keys => getItemsFromSomeStorage(keys),
20  set: items => setItemsToSomeStorage(items),
21  remove: keys => removeItemsFromSomeStorage(keys),
22  onChanged: {
23    addListener: listener => storageListeners.add(listener),
24    removeListener: listener => storageListeners.delete(listener),
25    hasListener: listener => storageListeners.has(listener),
26  }
27}
28
29const [usePersistedState, clear] = createPersistedState('example', myStorage)

Storage adapters

localStorage @plq/use-persisted-state/lib/storages/local-storage

• Useful for average web application

sessionStorage @plq/use-persisted-state/lib/storages/session-storage

• Useful for average web application

browser.storage @plq/use-persisted-state/lib/storages/browser-storage

• Only for web extensions.
• Don't forget to set up polyfill if you want to run extension in Chrome browser.
• To use this storage you need to include the "storage" permission in your manifest.json file

chrome.storage @plq/use-persisted-state/lib/storages/chrome-storage

• Only for Chrome-based web extensions.
• If you develop extension that will be run only in Chrome browser you can use this storage without polyfill.
• You must declare the "storage" permission in the extension manifest to use this storage.