Function useStorageSync

apps/plugin-browser/src/pages/shared/use-storage-sync.ts:25–87

(
  key: Key,
  initialValue: NonUndefined<LocalStorage[Key]>,
)

 * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage
 */
export const useStorageSync = <Key extends keyof LocalStorage>(
  key: Key,
  initialValue: NonUndefined<LocalStorage[Key]>,
) => {
  const [stateValue, setStateValue] = useState<LocalStorage[Key]>(initialValue);
  const [storageChecked, setStorageChecked] = useState(false);

  useEffect(() => {
    if (storageChecked) {
      return;
    }

    const getStorageValue = async () => {
      const storageValue = await getFromLocalStorage(key);

      if (typeof storageValue !== "undefined") {
        setStateValue(storageValue);
      } else {
        setStateValue(initialValue);
      }

      setStorageChecked(true);
    };

    void getStorageValue();
  }, [initialValue, key, storageChecked]);

  useEffect(() => {
    const listener = (
      changes: Record<string, browser.Storage.StorageChange>,
      areaName: string,
    ) => {
      if (
        areaName === "local" &&
        key in changes &&
        changes[key] &&
        changes[key].newValue !== stateValue
      ) {
        setStateValue(changes[key].newValue as LocalStorage[Key]);
      }
    };

    // Listen to changes in the storage area in case it's updated from another component, window, or background script
    browser.storage.onChanged.addListener(listener);

    return () => {
      browser.storage.onChanged.removeListener(listener);
    };
  }, [key, stateValue]);

  const setValue = useCallback(
    (newValue: LocalStorage[Key]) => {
      setStateValue(newValue);
      void setInLocalStorage(key, newValue);
    },
    [key],
  );