Custom react hook useStorage for browser extension developers

useStorage.js

import browser from 'webextension-polyfill'
import { useState, useEffect } from 'react'

function isDiferent (a, b) {
  if (typeof a !== typeof b) {
    return true
  }
  if (Array.isArray(a)) {
    return arrayIsDifferent(a, b)
  }
  if (typeof a === 'object') {
    return objectIsDiferent(a, b)
  }
  return a !== b
}

function arrayIsDifferent (a, b) {
  if (a.length !== b.length) {
    return true
  }
  return a.some((e, i) => {
    return isDiferent(e, b[i])
  })
}

function objectIsDiferent (a, b) {
  const keysA = Object.keys(a)
  const keysB = Object.keys(b)

  if (arrayIsDifferent(keysA, keysB)) {
    return true
  }

  return keysA.some((key) => {
    return isDiferent(a[key], b[key])
  })
}

export default function (key, first = null, area = 'sync') {
  const [value, set] = useState(first)
  browser.storage[area].get(key).then(sync => {
    if (isDiferent(value, sync[key])) {
      set(sync[key])
    }
  })

  const storageOnChange = (object, _area) => {
    if (area !== _area) {
      return
    }
    if (!object[key]) {
      return
    }
    if (isDiferent(value, object[key].newValue)) {
      set(object[key].newValue)
    }
  }
  useEffect(() => {
    browser.storage.onChanged.addListener(storageOnChange)
    return () => {
      browser.storage.onChanged.removeListener(storageOnChange)
    }
  })
  return value
}

If enough people are using it, I will create a npm module, otherwise let's share it this way