joeyparis / persistence-hooks Goto Github PK

The state setter function only works if a function is passed for the new state value. e.g.

const [state, setState] = useStateAndSessionStorage("", "storage-key")

// Works, sets state to "Red"
setState(() => "Red")

// Does not work, state stays the same
setState("Red")

This is because we only reference the new value if the value is a function in the useStateAndPersistence method.

function useStateAndPersistence(createMethods, initial, key, options) {
   ...
   return [
    value,
    (updater, callback) => {
      const nextValue = typeof updater === 'function'
        ? updater(value)
        : value // This should be `updater` instead
      set(nextValue)
      setValue(nextValue)
      callback && callback()
    },
  ]
}

We may want to rename updater to something like getNextValue instead

Currently, useStateAndCookie won't update the expiration time if it is changed after the first render. This makes it difficult to have a flexible expiration time depending on a users choice (e.g. remind me tomorrow vs remind me next week). Technically we could use two separate instances of useStateAndCookie with the same key, but I don't know how I feel about two methods affecting the same cookie value.

My proposition would be to add a 3rd return argument in useStateAndPersistence called setOptions. Does this sound like a good approach and is it worth my time doing?

When the setter function returned by any of the 3 hooks is provided to the dependency array of useEffect(), it causes an infinite rendering loop. It seems that the setter function changes on every render.

Thanks for the library! It's very easy to use.