Hydration Error with Local Storage

[delicate tiger]

I'm creating a recent searches feature for a restaurant app, for that I've created a custom hook "useLocalStorageSearches" and on click of a searched restaurant it calls "addToRecentSearches" function which updates the recentSearches, but for some reason I'm facing Hydration Error.

[little quest]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[raven heart]

the return of the callback function of useState has to be the same on the server and the client for the first execution. since you are using a conditional with typeof window then it will always be different, resulting in the hydration error

you need to initialize the state with an empty value then read from localStorage using useEffect or useSyncExternalStore

[delicate tiger]

Oh yes, now I'm using another usEffect to get Items from localStorage and setting the useState to inital value which is [], but it is getting re-rendered and again setting the localStorage back to [] and I can't seem to find a way around can you help me with that?

[little quest]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1215173119447269386 message)