ReactJS Custom hook for syncing state between tabs and persist to localStorage.

useSyncedState.js

import { useEffect, useState } from "react";

export const useStorageArea = storageArea => (key, initialValue) => {
  const [item, setValue] = useState(
    () => JSON.parse(storageArea.getItem(key)) || initialValue
  );

  const updateFromEvent = e => {
    if (e.key === key && e.storageArea === storageArea) {
      setValue(JSON.parse(e.newValue));
    }
  };

  useEffect(() => {
    storageArea.setItem(key, JSON.stringify(item));
  });

  useEffect(() => {
    window.addEventListener("storage", updateFromEvent);

    return () => {
      window.removeEventListener("storage", updateFromEvent);
    };
  });

  return [item, setValue];
};

export const useStorageState = useStorageArea(window.localStorage);
export const useSessionState = useStorageArea(window.sessionStorage);

I don't recommend anyone using this. I made it purely to test things out