Have a React application. Certain components will set different data values ​​to local storage using the same key over a period of time. I need to subscribe to several components of this project in local storage. Whenever a value with a specific key is updated in local storage, subscribed components should be notified or provided with the updated value in local storage.

I tried creating a custom hook for this and using with by adding an event listener to the storage event as shown below.

const useSyncLocalStorage = (key: string) => {
  const [storageVal, setStorageVal] = useState<string | null>(() => localStorage.getItem(key));

  const handleStorageChange = () => {
    const value = localStorage.getItem(key);
    setStorageVal(value);
  };

  useEffect(() => {
    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  return storageVal;
};

and use it in a component like this:

const locationStored = useSyncLocalStorage('location');

I tried updating the local storage value on the click event, but the hook does not return the updated value in the local storage. I verified that the local storage value was updated in the dev tools. The problem appears to be that the storage event is not being fired in the same window/tab that caused the storage change.

Is there any way to subscribe to the value of localstorage?