A pattern for persisting and syncing an atom's value in Jotai

persisted-synced-atom.ts

import { atom, useAtom } from "jotai";

const atomWithSyncedLocalStorage = <T>(key: string, initialValue: T) => {
  const baseAtom = atom(initialValue);
  baseAtom.onMount = (setValue) => {
    const storageUpdateListener = (e: StorageEvent) => {
      if (e.key === key) {
        console.log("Updating instance of ", key, " remotely");
        setValue(e.newValue ? JSON.parse(e.newValue) : undefined);
      }
    };
    window.addEventListener("storage", storageUpdateListener);
    const item = localStorage.getItem(key);
    item && setValue(JSON.parse(item));

    return () => window.removeEventListener("storage", storageUpdateListener);
  };
  const derivedAtom = atom(
    (get) => get(baseAtom),
    (get, set, update) => {
      const nextValue =
        typeof update === "function" ? update(get(baseAtom)) : update;
      set(baseAtom, nextValue);
      if (nextValue === undefined) {
        localStorage.removeItem(key);
      } else {
        localStorage.setItem(key, JSON.stringify(nextValue));
      }
    }
  );
  return derivedAtom;
};

export const createSyncedStorageAtom = <T>(
  STORAGE_KEY: string,
  defaultValue: T
) => {
  const syncedStorageAtom = atomWithSyncedLocalStorage<T>(
    STORAGE_KEY,
    defaultValue
  );
  const useSyncedStorageAtom = () => useAtom(syncedStorageAtom);

  return [syncedStorageAtom, useSyncedStorageAtom] as [
    typeof syncedStorageAtom,
    typeof useSyncedStorageAtom
  ];
};

@dai-shi Good call outs! This was a rough rip from a React Native implementation I was porting, forgot to gut the async wrapper 😅

Just updated with that + the event listener cleanup!