Custom hook to use Chrome's sync storage api as a stateful variable store. Drop-in replacement for useState

useChromeStorage.js

const useChromeStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    chrome.storage.sync.get([key], result => {
      if (result && result[key] !== undefined) {
        setStoredValue(result[key]);
      } else {
        chrome.storage.sync.set({ [key]: initialValue }, () => {});
      }
    });
    return initialValue;
  });

  const setValue = value => {
    const newVal = value instanceof Function ? value(storedValue) : value;
    setStoredValue(newVal);
    chrome.storage.sync.set({ [key]: newVal }, () => {});
  };

  return [storedValue, setValue];
};