Error when using server-side rendering (SSR)

[haydn]

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):

react-use-localstorage/src/index.ts

Lines 7 to 9 in af1c0b7

	const [value, setValue] = React.useState(
	() => localStorage.getItem(key) || initialValue
	);

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];

[dance2die]

Hi @haydn Thanks for the SSR issue and the workaround for it.

I think the implementation of useSSRLocalStorage might be better to be mentioned in the README instead of adding it to the library as it's so simple and probably not used all the time.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[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)
}

[dance2die]

#34 to associate the issue.

[otherjohn]

PLEASE PLEASE PLEASE reference this fix for Gastby users. I spent days trying to track down what was happening. @haydn and @hencatsmith (I use Typescript) fix was great for my Gastby build error!

[dance2die]

Hi @otherjohn.

I've updated README with @hencatsmith's workaround

[Aditya94A]

Where exactly should you put this useSsr hook?

I get the following error:

 React Hook "useLocalStorage" is called conditionally. React Hooks must be called in the exact same order in every
 component render  react-hooks/rules-of-hooks

[haydn]

@AdityaAnand1 Ah, yes. That linter is probably upset that we're calling useLocalStorage inside a conditional, which is technically against the rules. In practice this isn't actually going to be a problem because the condition isn't going to change between updates (it's always going to one condition on the server and the other condition on the client).

A workaround for now would be to disable the ESLint rule:

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

@dance2die This might be a reason to solve the problem inside the hook instead of leaving it to users to workaround it. SSR is becoming a lot more common with things like Gatsby and Next.js rising in popularity, so I think you're going to keep seeing people run into this.

[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.

[westprophet]

If anyone can help suggest how to apply this hook in next.js so that it works, I would be very grateful