lbry-desktop/ui/effects/use-persisted-state.js

import { useState, useEffect } from 'react';

const listeners = {};

function getSetAllValues(key, setValue) {
  if (!key) {
    // If no key just return the normal setValue function
    return setValue;
  }
  return value => listeners[key].forEach(fn => fn(value));
}

export default function usePersistedState(key, firstTimeDefault) {
  // If no key is passed in, act as a normal `useState`
  let defaultValue;
  let localStorageAvailable;

  try {
    localStorageAvailable = Boolean(window.localStorage);
  } catch (e) {
    localStorageAvailable = false;
  }
  if (key && localStorageAvailable) {
    let item = localStorage.getItem(key);

    if (item) {
      let parsedItem;
      try {
        parsedItem = JSON.parse(item);
      } catch (e) {}

      if (parsedItem !== undefined) {
        defaultValue = parsedItem;
      } else {
        defaultValue = item;
      }
    }
  }

  if (!defaultValue && defaultValue !== false) {
    defaultValue = firstTimeDefault;
  }

  const [value, setValue] = useState(defaultValue);

  if (key && !Array.isArray(listeners[key])) {
    listeners[key] = [];
  }

  useEffect(() => {
    if (key && localStorageAvailable) {
      localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : value);
    }
    if (key) {
      // add hook on mount
      listeners[key].push(setValue);
    }
    return () => {
      if (key) {
        // remove hook on unmount
        listeners[key] = listeners[key].filter(listener => listener !== setValue);
      }
    };
  }, [key, value, localStorageAvailable]);

  return [value, getSetAllValues(key, setValue)];
}