Use State Persist

A simple React Hook to persist useState in local storage.

Works on the Web and React Native.

Easily implement

• Offline state
• Stale while revalidate flow
• Global state

1npm install use-state-persist
2# or
3yarn add use-state-persist

For React Native make sure you do the following on app start up:

1import { syncStorage } from 'use-state-persist';
2
3// Initialize async storage
4await syncStorage.init();

How to persists useState

Same behavior and API as useState so you can use it by easily replacing the useState hook for the calls which you want to persist offline.

1import { useStatePersist as useState } from 'use-state-persist';
2
3const Component = () => {
4  // Before
5  //const [counter, setCounter] = useState(0);
6  const [counter, setCounter] = useState('@counter', 0);
7
8  return <CounterDisplay value={counter} />;
9};

Stale While Revalidate

1import { useStatePersist as useState } from 'use-state-persist';
2
3const Component = () => {
4  // Loads stale state
5  const [data, setData] = useState('@data');
6
7  const fetchData = async () => {
8    // Fetches new state
9    const data = await fetch('/endpoint');
10    setData(data);
11  };
12
13  useEffect(() => {
14    fetchData();
15  }, []);
16
17  return <DataDisplay value={data} />;
18};

Global State

Simple event system allows all the storage writes to be dispatched to all hooks . That means that all useStatePersist() can be used as a global state by sharing the same key useStatePersist('@globalKey')

To avoid that just make sure that the key being passed to the hook is unique useStatePersist('@uniqueKey')

1const CounterButton = () => {
2  const [counter, setCounter] = useState('@counter');
3
4  return <Button onClick={() => setCounter(counter => counter++)} />;
5};

State will be updated across multiple components

1const ShowCounter = () => {
2  const [counter, setCounter] = useState('@counter', 0);
3
4  return <CounterDisplay value={counter} />;
5};

Cache Invalidation

There are some cases where you might want to clear all the local storage cache for the hook, pending a certain change in state in the app.

This will clear all the local storage items use by the useStatePersist hook when the key changes.

Use Cases

• User/App State changes
• User Log out
• Environment variable changes

1import { invalidateCache } from 'use-state-persist';
2
3invalidateCache('CACHE_KEY');
4
5// You can also send a promise which will compare the result
6invalidateCache(async () => 'CACHE_KEY');

React Native

Init prepares the SyncStorage to work synchronously, by getting all values for all keys stored on AsyncStorage. You can use the init method on the web without any side effects to keep code consistency.

1import { syncStorage } from 'use-state-persist';
2
3await syncStorage.init();