I encountered an issue when trying to access window.localStorage in my Next.js application. Since Next.js allows for both server-side and client-side rendering, I ran into an error when attempting to set the default value of a state using local storage like so:
useState(window.localStorage.getItem("tag"))
The error message indicated that window was undefined.
After some troubleshooting, I decided to utilize a useEffect hook to set the state value once the component had fully rendered:
useEffect(() => {
setState(localStorage.getItem("tag"));
}, []);
Although this solution seemed to work, I am uncertain if it is the most efficient approach. Can anyone suggest a better way to handle this situation? Thank you.