Why the double useMemo?

[wmertens]

I don't understand this code:

use-ssr/useSSR.ts

Line 51 in 88e408c

return useMemo(() => Object.assign(Object.values(useSSRObject), useSSRObject), [whereAmI])

  const useSSRObject = useMemo(() => ({
    isBrowser: whereAmI === BROWSER,
    isServer: whereAmI === SERVER,
    isNative: whereAmI === NATIVE,
    canUseWorkers: typeof Worker !== 'undefined',
    canUseEventListeners: whereAmI === BROWSER && !!window.addEventListener,
    canUseViewport: whereAmI === BROWSER && !!window.screen
  }), [whereAmI])

  return useMemo(() => Object.assign(Object.values(useSSRObject), useSSRObject), [whereAmI])

First it creates useSSRObject, which seems like it should be sufficient, and then it creates an array of the values that also looks like useSSRObject?

Also, all these values are static, so they could just be exported from a module without all the hooks?

[wmertens]

ah ok, the array+object is to allow both [isBrowser, isServer, ...] and direct property access. Still, that could be done in the first useMemo, no?

Another observation: how about just exporting the static values, and a function that you can call on the server to set isServer:true? That way, there's no guesswork and no hooks needed?

[alex-cory]

When would we need to explicitly set isServer to true?

[alex-cory]

Honestly, it's probably an overuse of useMemo.

[wmertens]

Ah, I didn't get around to commenting yet - actually for hydration it should be possible to turn on isServer and then turn it off. Coincidentally, there's a discussion at GoogleChromeLabs/react-adaptive-hooks#18 on how to do this best.