Removal of localStorage or sessionStorage key is not synced across tabs

[develohpanda]

Prior Issues

None that I could find

What is the current behavior?

Remove a local storage key in one tab, observe that it does not trigger an update in another tab.

Steps to Reproduce

1. Open the storybook example in two tabs https://react-hookz.github.io/web/?path=/docs/side-effect-uselocalstoragevalue--example
2. Edit the value in one tab, notice that it updates in the other tab
3. Press the "remove storgae value" button in one tab, notice that it does not update in the other tab

What is the expected behavior?

Key removals should be synchronized across tabs

Potential cause

I believe the cause is in this event handler, specifically the evt.newValue condition.

web/src/useStorageValue/index.ts

Lines 28 to 32 in 579a445

	const storageEventHandler = (evt: StorageEvent) => {
	if (evt.storageArea && evt.key && evt.newValue) {
	invokeStorageKeyListeners(evt.storageArea, evt.key, evt.newValue);
	}
	};

When a key is removed, evt.newValue is set to null, and thus gets filtered out in this conditional. I have confirmed through while debugging, and the second tab does receive the storage event correctly, but gets filtered out here.

This seems like a bug, because there's an invocation to the event handlers with the value null on the during the remove step, however that only applies to the current tab and is not synced to other tabs.

web/src/useStorageValue/index.ts

Line 235 in 579a445

invokeStorageKeyListeners(storage, key, null);

Environment Details

• @react-hookz/web version: 23.1.0 and 24.0.4
• react version: 18.2.0
• react-dom version: 18.2.0
• typescript version: 5.4.4
• OS: Windows
• Browser: Firefox/Edge/Chrome
• Did this work in previous versions? Not that I know of