Next.js Discord

Discord Forum

how can i use localStorage inside my client component? i get this error all the time

Unanswered
American Robin posted this in #help-forum
Open in Discord
Avatar
American RobinOP
- error ReferenceError: localStorage is not defined

27 Replies

Avatar
American RobinOP
im storing data like: language in the localStorage
the component get pre rendered on the server right? if im not wrong, how do i have to work with this
Avatar
Put it into useEffect
Avatar
American RobinOP
oke ill try that
Avatar
Your client component is pre-rendered on the server, but useEffect is only executed on the client side after hydration
Avatar
American RobinOP
i dont get the error anymore, but its not workin properly atm
mhmm
atleast the error is gone
Avatar
A flash is caused because the useEffect wonÒ€ℒt be executed instantly. It happens after hydration, you can add a skeleton to prevent the flash
Avatar
American RobinOP
i would make a state, loading right?
to check if is loading true or not
and put the skell then there
Avatar
Yeah, just determine yourself :RyoXD:
Avatar
American RobinOP
oh it worked now
but as u said
there is still thhe "flash"
where it changes
after 1s
Avatar
American RobinOP
@fuma πŸ’™ joulev as i can see my custom hook is a problem
i cant use a custom hook with the local storage
Avatar
What do you mean by custom hook?
ThatÒ€ℒs why you will need a skeleton component, so that the flash can look better for users
Avatar
American RobinOP
useLocalStorage hook
ye true
Avatar
American RobinOP
its only like rly 0.2ms ? smth like that rly instant, the skelton is showing only for that small time
is that ok tho?
Avatar
Of course, itÒ€ℒs fine