I definitely like the idea and mostly of how it's implemented, but the somewhat big caveat to me as DRY guy is repeating the initial state. I mean with regular useState it does make sense as it's isolated but looking at this like a "shared" state, there should definitely be a single place to declare initialState.

I would propose to expand API like createPersistentState(key, initialState). I know there is another argument for storage, but that's likely to be used rarely, so it can be at 3rd place just fine :) Alternatively, it could make sense to export another function with currying behavior where storage would be specified in the first argument and it would return factory bound to that storage type.

Of course, it would still be possible to specify an initial state directly in a component, but it would be optional. Perhaps it could even show DEV-only warning to keep such state unified.

This looks great, at first glance the main thing lacking is an equivalent of useReducer for more complex state management. Any interest in extending it a bit?

THere is no global variable in browsers. It is window for browsers , global is for node or new globalThis for both.
While some packagers polyfills node's global, this package should not relay on packagers (webpack or either)
It's better to add either polyfill or make some checks

The official setState hook supports an updater function (e.g setState(state => ({ ...state, change: 'this' })). Right now, if you use this pattern with usePersistedState, it results in undefined being stored in localStorage.

Use case: calling setPeristedState in useEffect without having to add the persistedState to the dependencies array (you don't actually have to, but eslint is throwing warnings) which would cause an infinite loop.

Hi,
i discovered that using window.localStorage.clear() in beforeEach has no effect in jest tests. Tried also global instead of window.

https://codesandbox.io/s/2o1ljwjwy0

All test should work because i only click once.

How can i reset the storage for each test?

If a component is removed right after setting a new persisted value, the value is never set. It looks like this is because setState from useState is being returned directly. The updated state never gets seen because the component doesn't re-render. That would be fine with a vanilla useState, but isn't when you are using persistent state.

I think the fix is to return a wrapped setState function and force the value to be persisted when it is called rather than relying purely on state changing which it doesn't in this case.

Here is a reproducible example. The 'Increment' button works but the 'Increment and Hide' does not.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

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)
    };
};


const App = () => {
    const { count } = useCounter(1);
    const [showIncrement, setShowIncrement] = useState(true);

    let ComponentToShow;
    if (showIncrement) {
        ComponentToShow = () => <IncrementComponent close={() => setShowIncrement(false)} />;
    } else {
        ComponentToShow = () => <button onClick={() => setShowIncrement(true)}>Show Again</button>;
    }

    return <div>
        <div>count is {count}</div>
        <ComponentToShow />
    </div>
};

const IncrementComponent = ({ close }) => {
    const { increment } = useCounter(1);

    const incrementAndHide = () => {
        increment()
        close()
    };

    return <div>
        <button onClick={increment}>Increment</button>
        <button onClick={incrementAndHide}>Increment and Hide</button>
    </div>
}

ReactDOM.render(<App />, document.getElementById('root'));

Needs support for React 18.

Gives errors on installations, upgrades etc (npm i)

Right now this hook can produce unexpected hooks because it will return a different object even if its value is identical to the previous one.

Considered that we are working with JSON data, it would be safe to do a value equality check any time we parse the new value, and if it matches the previous one, we should return the previous one to preserve its identity.

for DefinitelyTyped/DefinitelyTyped#32979

The NPM Package for this project is still not updated to support the react 18 peer dep change.

usePersistedState.js:13 often fails with parsing non JSON data.

only on Safari and React Native (likely only mac devices)

I can provide more details should someone be maintaining the package?

This is probably unconventional, but I currently have an use-case where I'd like to use sessionStorage as the storageProvider and have the value synced across tabs/windows similar to the localStorage provider.

The use-case is a splash screen that the user clicks through once upon application load, so sessionStorage is ideal in this situation since they shouldn't see it again upon browser refresh, but I'd like this value to also sync across tabs.

Any thoughts on whether or not it's a feasible goal for this hook?

SyntaxError: Unexpected token e in JSON at position 1
  at JSON.parse(<anonymous>)
  at current(./node_modules/use-persisted-state/dist/use-persisted-state.m.js:1:766)
  at n(./node_modules/@use-it/event-listener/dist/event-listener.m.js:1:199)
  at n(./node_modules/@sentry/browser/esm/helpers.js:70:1)

See line 12 below:

Other modules may use localStorage and not store JSON.

from the sources:

const newState = JSON.parse(newValue);
    if (k === key && state !== newState)

state !== newState would always resolve to true since newState is just a newly created object returned from JSON parse

@donavon There hasn't been a new version in 2 years and people have reported bugs in issues. That's a shame since this package has over 44,000 weekly downloads according to npm.

When could we expect to see anymore development? Is this abandoned?

I had the issue that the persisted value got set to undefined in the local storage. Debugging in chrome showed the key in the localStorage listed, but with value undefined set. Note that the value was set undefined, not to the string "undefined"
For some unknown reason this ends to the json object beeing the string "undefined". Therefore line 6 of createStorage.js fails to catch it and it tries to parse the string 'undefined' as json. What leads to the error.
Is: return json === null || typeof json === "undefined" ? ...
Fix: return json === null || json === 'undefined' || typeof json === "undefined" ? ...

Environment: Chrome, windows 10, Visual Code, React

For example:

const useOpts = createPersistedState('key');

const Comp = props => {
  const [opts, setOpts] = useOpts({
    show: false
  });
  useEffect(() => {
    if (opts.show) {
      console.log('Show');
    } else {
      console.log('Hide');
    }
    if (opts._originDoc === document) {
      console.log('Origin was from this tab');
    } else {
      console.log('Origin of update was from another tab');
    }
  }, [opts.show])
  return (
    <>Test</>
  );
}

The setter function that is returned is not memoized, because it is always changed into a new function at each render (every invoke of the hook).

I just migrated my React app from CRA to Vite and this error

I'll try to post more but I'm getting this when values are loaded between windows

Uncaught SyntaxError: Unexpected token c in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.current (:8500/Users/burton/projects/polar-app/packages/polar-bookshelf/node_modules/use-persisted-state/dist/use-persisted-state.js:1)
    at e (:8500/Users/burton/projects/polar-app/packages/polar-bookshelf/node_modules/@use-it/event-listener/dist/event-listener.js:1)

It will be nice to add a codesandbox link into README to show how to use it in action.

How to solve this issue?

Using the package on development mode from the git repo does not work.

• Works: yarn run dev. It does not throw any error on console.
• Works: yarn run test. It does not throw any error on console.
  It means it's built properly, right?

But,

• Works: import createPersistedState from 'use-persisted-state'.
• Doesn't Work: import createPersistedState from './use-persisted-state'. It throws the following error,

Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
  1 | import createPersistedState from './use-persisted-state';
  2 | const useCounterState = createPersistedState('count');
  3 | 
> 4 | const useCounter = initialCount => {
    |                                   ^  5 |   const [count, setCount] = useCounterState(initialCount);
  6 | 
  7 |   return {

I found no contribution guide so maybe I did not do it the right way.

Hey, I would like to use use-persisted-state with AsyncStorage available in react-native. The problem is that it returns Promises instead of plain values. Do you think it would be possible to accommodate such use case?

when I call the setState in a subsequent useEffect call I get this.

Seems to work, but the next call is not valid.

With React's useState hook, you can call setState multiple times and it will queue the updates, as long as you are passing a function to setState. However, in this library only the last call will take effect while all other calls will be effectively ignored.

Fortunately this is implemented properly in https://github.com/astoilkov/use-local-storage-state so you can use that library instead if you are running into this issue.

Need option for the stored data to be encrypted while stored in localstorage so it could not be easily read by anyone, and should be again decrypted back to orginal content when reading from within the app.

Would be good for storing data that should not be directly changed by the user from developers tools

For instance, is this safe?

export const MyComp = ({ myKey }) => {
  const usePrefState = createPersistedState(
    `prefix:${myKey}`
  );
  const [show, toggle] = usePrefState(0);

  return (

By "safe" I mean:

• This approach results in about the same number of read/write operations
• This approach will not result in any unintended consequences, such as performance issues or data loss due to re-renders.

--

Note: As I was typing up this question, I decided to try an approach with useMemo that would limit the concern. I'll go ahead and leave the above section just for reference, and leave the below code snippet for those with the same question:

export const MyComp = ({ myKey }) => {
  const usePrefState = useMemo(() => createPersistedState(
    `prefix:${myKey}`, []
  ));
  const [show, toggle] = usePrefState(0);

  return (