use-persisted-state

A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.

use-persisted-state is not a hook itself, but is a factory that accepts a storage key and an optional storage provider (default = localStorage) and returns a hook that you can use as a direct replacement for useState.

Features

💾 Persists the state to localStorage

🖥 Syncs between tabs and/or browser windows

📑 Shares state w/multiple hooks on a page

Requirement

To use use-persisted-state, you must use react@16.8.0 or greater which includes Hooks.

Installation

$ npm i use-persisted-state

Example

Let's take a look at how you can use use-persisted-state. Here we have an example of a typical up/down counter.

import { useState } from 'react';
 
const useCounter = initialCount => {
  const [count, setCount] = useState(initialCount);
 
  return {
    count,
    increment: () => setCount(currentCount => currentCount + 1),
    decrement: () => setCount(currentCount => currentCount - 1),
  };
};
 
export default useCounter;

Let's replace the import of react with an import from use-persisted-state. And we'll call createPersistedState (the factory function). This will return a useCounterState hook that we can use in place of useState.

The complete code is as follows.

import createPersistedState from 'use-persisted-state';
const useCounterState = createPersistedState('count');
 
const useCounter = initialCount => {
  const [count, setCount] = useCounterState(initialCount);
 
  return {
    count,
    increment: () => setCount(currentCount => currentCount + 1),
    decrement: () => setCount(currentCount => currentCount - 1),
  };
};
 
export default useCounter;