Error when using server-side rendering (SSR)

Overview

This hook currently throws this error when used with ReactDOMServer:

ReferenceError: window is not defined
    at eval (webpack:///./node_modules/react-use-localstorage/dist/react-use-localstorage.esm.js?:12:5)

This happens because it’s trying to access localStorage when getting the initial value (runpkg link):

https://github.com/dance2die/react-use-localstorage/blob/af1c0b724613096be1b79bcb830b8dea0137cd09/src/index.ts#L7-L9

Note: The function that is passed to useEffect isn’t executed on a server, so accessing localStorage there doesn’t cause any problems.

Expected Behaviour

The initialValue is always used when rendering on the server.

Current Behaviour

It throws an error.

Workaround

An easy way to workaround this issue is to wrap it in a custom hook:

const useSSRLocalStorage = (key, initial) =>
  typeof window !== "undefined" ? useLocalStorage(key, initial) : [initial];

[henrycatalinismith]

Just leaving a quick drive-by comment to thank @haydn for the workaround for this issue. I’m using this hook in a Gatsby project where all components need to be SSR safe and it fixed my problem!

Here’s what I came up with to satisfy TypeScript’s complaints about the workaround:

const useSsrLocalStorage = (key: string, initial: string): [string, React.Dispatch<string>] => {
  return typeof window === 'undefined'
    ? [initial, (value: string) => undefined]
    : useLocalStorage(key, initial)
}

[westprophet]

const useSSRLocalStorage = (key, initial) => typeof window !== "undefined" ? useLocalStorage(key, initial) : [initial]; // eslint-disable-line react-hooks/rules-of-hooks

This code doesn’t work for Next.js ^ 10. Any way, I could not apply it although I really wanted to.