rehooks/local-storage

delete not detected across browser tabs?

mifi opened this issue · 4 comments

mifi commented

First thanks for this extremely practical hook!

To reproduce the problem:

const [val, setVal, deleteVal] = useLocalStorage('myval');

useEffect(() => console.log({ val }), [val]);

  1. Run page in two tabs in Chrome.

  2. When calling deleteVal() in one tab, the useEffect callback never gets fired in the other tab.

  3. However, when calling setVal(null) in one tab, useEffect callback gets fired and logs {val: undefined}

So using setVal(null) instead of deleteVal is definitely a workaround, but it seems like deleteVal should also work.

jharrilim commented

I have done some debugging and I found the culprit:

local-storage/src/use-localstorage.ts

Line 58 in cdbe4e3

if (event.newValue) {

Instead we should only check if it is undefined, as null is a valid value during deletion. That being said, our types are a bit off as well, and we will have to update the state value to be TValue | null.

  • 👍1
thornyweb commented

Also seeing this issue in 2.4.0, can see the code is fixed in master branch, @jharrilim is there a scheduled next release for this at all?