useGlobalMemo is a React hook that lets you share memoizations across an entire app using a unique key.

useGlobalMemo.js

const cache = {}

export default function useGlobalMemo (key, fn, deps) {

  if (!cache[key]) {
    cache[key] = {
      subs: 0,
      deps,
      value: fn(),
    }
  } else {
    const oldDeps = cache[key].deps

    if (oldDeps.length !== deps || oldDeps.some((d, i) => deps[i] !== d)) {
      cache[key] = {
        deps,
        value: fn()
      }
    }
  }

  React.useEffect(() => {
    cache[key].subs += 1

    return () => {
      cache[key].subs -= 1

      if (!cache[key].subs) {
        delete cache[key]
      }
    }
  }, [])

  return cache[key].value
}