Error: useLocalStorage is a client-only hook

[sadaffathali]

I use useLocalStorage in a next-hook, I'll use that hook in the client-side component and still get this error

Error: useLocalStorage is a client-only hook

this is the hook I wrote:

`export default function useUserToken(): UseUserTokenHook {
const [userToken, setUserToken] = useLocalStorage(USER_TOKEN_KEY)

useEffect(() => {
    if (typeof window === 'undefined') {
        return
    }
}, [])

const setToken = (token?: string) => {
    setUserToken(token)
}

if (!userToken) {
    const randomToken = crypto.randomUUID()
    setToken(randomToken)
}

return [userToken as string, setToken]

}`

[graup]

This is a duplicate of #218

That said, I also ran into this, and I think it is not very intuitive. Maybe it can be improved on this usehooks side.

[tylermcginnis]

I'll (soon) update the descriptions of all the client-only hooks to clarify the problem/solution.

[gardner]

If you found this looking for an answer, you can use this component:

ClientOnly.tsx

"use client";
/**
 * Hack to work around next.js hydration
 * @see https://github.com/uidotdev/usehooks/issues/218
 */
import React from 'react';
import { useIsClient } from "@uidotdev/usehooks"

type ClientOnlyProps = {
  children: React.ReactNode;
};

export const ClientOnly: React.FC<ClientOnlyProps> = ({ children }) => {
  const isClient = useIsClient();

  // Render children if on client side, otherwise return null
  return isClient ? <>{children}</> : null;
};

Then wrap your client components:

<ClientOnly>
  <MyComponentThatUsesHooks />
</ClientOnly>