Use-cached-state NPM

use-cached-state

A cached and optionally persisted alternative to useState.

Features

💰 Caches state values even after your component unmounts.

💰 Optionally persists to localStorage.

💰 Shares values between components on the same page and even in different browser tabs!

Installation

$ npm i use-cached-state

$ yarn add use-cached-state

Usage

Here is a basic setup. Perform the following from within your module, but not in your component. This will create a custom Hook that you can then use in your component.

const useCachedState = createCachedState(config);

Next, from without your component, do this (instead of useState).

const [state, setState] = useCachedState(options);

Parameters

createCachedState is passed a single config object with the following properties.

Parameter	Description
`namespace`	A required string that will be used as a namespace.
`storageProvider`	A storage provider to use. The default is `null` which specifies NOT to persist to storage (i.e. just cache in memory). The storage provider must provide a `getItem` and a `setItem` method. You may use `localStorage` or `sessionStorage` or your own custom storage provider.

Return

createCachedState returns a custom Hook that you can use from within your component. This custom Hook accepts an options object with the following properties.

Property	Description
`key`	A optional string that represents the key to use for this instance of the component. If all instances are to share the same state, pass the same key (or use the default).
`initialValue`	This will be the initial value used.