Lightweight, resilient persisted useState.

Features:

- 📦 Persist state on localStorage between browser sessions.
- ⚛️ Automatically handle state's shape updates.
- 🔄 Handle stale states when initial state changes.
- ✅ Similar interface to React's official useState hook.
- ✨ Server Side Render Support.

Installation

npm:

``sh
npm install use-persisted-state-hook
`

yarn:

`sh
yarn add use-persisted-state-hook
`

Detect Changes in Initial State

use-persisted-state-hook is the only library that handles changes in initial state gracefully. Leet's imagine that you have a hook called useLocalStorage like the one provided here. It has the same API that useState and looks like this:

`jsx
function Greet() {
const [visits, setVisits] = useLocalStorage('visits', 0)

// Logic to update visits...

return (


`jsx
function Greet() {
const [visits, setVisits] = useLocalStorage('visits', { today: 0, total: 0 }))

// Logic to update visits...

return (


The code above works, however, there's a pitfall. A user that
loaded your app after you released the first version, so the value it has stored
for visits is 0 (or 1, or 5, or any integer). When they load your app again with the new logic, they'll
see "Today's count is " and "Total count is ".

usePersistedState is the only library that handles this case gracefully by
storing an identifier that identifies uniquely the
initial state so, whenever it changes, the state it's going to be reset and
you'd never have to think about this issue in the first place ✨

Usage

Simple Example

`jsx
import React from 'react'
import usePersistedState from 'use-persisted-state-hook'

function Counter() {
const [count, setCount] = usePersistedState('count', 0)

return (


export default Counter
`

Elaborated Example

Expected output

Code (styles ommited):

`jsx
import React from 'react'
import usePersistedState from 'use-persisted-state-hook'

function Settings() {
const [options, setOptions] = usePersistedState('options', [
{ title: 'Dark Mode', name: 'dark_mode', enabled: true },
{ title: 'Data Saving 2', name: 'data_saving', enabled: true },
])

const onClick = (e) => {
setOptions(
options.map((option) =>
option.name === e.target.name
? { ...option, enabled: !option.enabled }
: option
)
)
}

return (