Error: useLocalStorage is a client-only hook - thrown from a client component

[mmkal]

Error: useLocalStorage is a client-only hook - thrown from a client component

[tylermcginnis]

Believe it or not, "use client" doesn't mean it only runs on the client 🙃

This should point you in the right direction - #218

[mmkal]

Thanks, missed all those other issues. Good to know there's a workaround.

Still, seems like a usability problem. I know client components also have an SSR pass, but the important thing is they will run in the client, so shouldn't it be fine to return the initial value when pre-rendering?

[tylermcginnis]

No, because if the value in localStorage when React hydrates is different than the default value you established on the server, you'll get a client/server mismatch error.

[mmkal]

I see. I guess I'd assumed that an additional render would take care of that on the client side. I just read through the useSyncExternalStore docs and it says re getServerSnapshot:

If you omit this argument, rendering the component on the server will throw an error

So maybe this library doesn't need to explicitly throw anyway? Is there any way you can think of that would allow for developers to have a server-default behaviour without wrapping the whole component (e.g. if you do useLocalStorage('k', 'v', { ssr: true }) then it always uses initialValue on first render, then updates in the next render)? Maybe this library could bake in any or all of the three suggestions on the page you linked? https://nextjs.org/docs/messages/react-hydration-error, or maybe a suspense/error boundary that can catch the prerender error and show a fallback UI, higher up in the tree?

[tylermcginnis]

It doesn't need to throw an error, but (IRRC) the one we throw is more descriptive than the one React does. I think the solution is to make the docs more clear that it should be used together with useIsClient when you're working in a Next app. Been meaning to do that but haven't yet. Don't love the idea of trying to get around hydration errors.