Persisted versions of useState
and useReducer
.
- TypeScript support.
- Tree-shakeable.
- Hooks created by the factories have the exact same API and types as
useState
anduseReducer
.
import { createUseStatePersisted } from 'use-persisted'
const useStatePersisted = createUseStatePersisted('localstorage-key')
// In your component.
const [myState, setMyState] = useStatePersisted(myInitialState)
import { createUseReducerPersisted } from 'use-persisted'
const useReducerPersisted = createUseReducerPersisted('localstorage-key')
// In your component.
const [myState, dispatch] = useReducerPersisted(myReducer, myInitialState)
-
https://github.com/donavon/use-persisted-state
- Seems to have been the first library doing stuff like this.
- I didn't really need the synchronization functionality.
-
https://github.com/johnayeni/use-persisted-reducer
- Seems to draw inspiration from
use-persisted-state
but provides auseReducer
API.
- Seems to draw inspiration from
-
https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer/
- Guidance on implementing
useState
withuseReducer
, which allows for some code sharing betweencreateUseReducerPersisted
andcreateUseReducerPersisted
.
- Guidance on implementing
As far as a comparison between this and the listed libs, these are things unique to this package:
- Provides persisted versions of both state primitives from React.
- Provides TypeScript types.
- Is tree-shakeable.
- Uses
tsdx
.