'use client' not really working
Answered
Ultrasanic posted this in #help-forum
I have a component which uses a hook
I've marked the component as "use client" but it still seems to call the hook. This is a problem because the hook fails hard when its used on the server instead of just returning a default value.
Do I try to edit the hook myself to change how it behaves or is there a proper workaround for this?
import { useLocalStorage } from "@uidotdev/usehooks";I've marked the component as "use client" but it still seems to call the hook. This is a problem because the hook fails hard when its used on the server instead of just returning a default value.
Do I try to edit the hook myself to change how it behaves or is there a proper workaround for this?
Answered by Ultrasanic
Yeah this isn't really an option, the component will be present on my website's navbar
I think the best way forward is to just pull the needed hook from the module and just edit it to make it SSR compatible
I think the best way forward is to just pull the needed hook from the module and just edit it to make it SSR compatible
11 Replies
@Ultrasanic I have a component which uses a hook `import { useLocalStorage } from "@uidotdev/usehooks";`
I've marked the component as "use client" but it still seems to call the hook. This is a problem because the hook fails hard when its used on the server instead of just returning a default value.
Do I try to edit the hook myself to change how it behaves or is there a proper workaround for this?
Client component still run on the server for the initial rendering, so anything you use inside them should be compatible with SSR
Shy Albatross
or your code should be SSR-compatible, which means you should wrap any browser-API-specific code in a condition that checks if you're in a browser
either generic
if (typeof window !== "undefined") or specifically that if (global.localStorage)@Shy Albatross or your code should be SSR-compatible, which means you should wrap any browser-API-specific code in a condition that checks if you're in a browser
Wrapping hooks in conditionals gives me a warning, so I don't really want to do that
Shy Albatross
but you can wrap a whole component
conditionally render a component that depends on browser-specific API, since it makes no sense to render it on server in the first place
this will result in a flash of content, it is not a recommended pattern
Shy Albatross
you mean layout shift because there will be a hole?
what else can he do if the hook isn't SSR compatible
@Rafael Almeida this will result in a flash of content, it is not a recommended pattern
Yeah this isn't really an option, the component will be present on my website's navbar
I think the best way forward is to just pull the needed hook from the module and just edit it to make it SSR compatible
I think the best way forward is to just pull the needed hook from the module and just edit it to make it SSR compatible
Answer
Thanks for your inputs, though