persistent recoil.js atom using local storage

localStorageAtom.ts

import { atom, AtomEffect, AtomOptions, DefaultValue } from 'recoil';

export const localStorageEffect =
    (key: string): AtomEffect<any> =>
    ({ setSelf, onSet }) => {
        const savedValue = localStorage.getItem(key);
        if (savedValue != null) {
            setSelf(JSON.parse(savedValue));
        }

        onSet((newValue) => {
            if (newValue instanceof DefaultValue) {
                localStorage.removeItem(key);
            } else {
                localStorage.setItem(key, JSON.stringify(newValue));
            }
        });
    };

export function localStorageAtom<T>(options: AtomOptions<T>) {
    return atom({
        ...options,
        effects_UNSTABLE: [localStorageEffect(options.key)],
    });
}