-
Notifications
You must be signed in to change notification settings - Fork 529
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Error: useLocalStorage is a client-only hook #318
Comments
Had the same issue in my project. Couldn't find a solution. So I wrote my own implementation of the The problem with it is, it gives a flicker each time you refresh the page. |
Same issue here when we refresh the page with ctrl+r :/ |
I have identified the issue. The thing is, But I don't understand why would next.js call it from server side when I explicitly made the component |
The issue here is that Unfortunately, the flicker that the alternative implementations have is largely unavoidable, for this very same reason. |
I switch to |
Hey guys! I've had the same issue. So I created my custom hook "use client";
import { useCallback, useEffect, useState } from "react";
function useLocalStorage<T>(
key: string,
initialValue: T,
): [T, (value: T | ((val: T) => T)) => void] {
// Initialize state with a function to handle SSR
const [localState, setLocalState] = useState<T>(() => {
// Check if we're in a browser environment
if (typeof window === "undefined") {
return initialValue;
}
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.warn(`Error reading localStorage key "${key}":`, error);
return initialValue;
}
});
// Return a wrapped version of useState's setter function that persists the new value to localStorage
const handleSetState = useCallback(
(value: T | ((val: T) => T)) => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(localState) : value;
// Save state
setLocalState(valueToStore);
// Save to local storage
if (typeof window !== "undefined") {
window.localStorage.setItem(key, JSON.stringify(valueToStore));
}
} catch (error) {
console.warn(`Error setting localStorage key "${key}":`, error);
}
},
[key, localState],
);
useEffect(() => {
// Handle storage changes in other tabs/windows
function handleStorageChange(event: StorageEvent) {
if (event.key === key && event.newValue) {
setLocalState(JSON.parse(event.newValue));
}
}
// Subscribe to storage changes
if (typeof window !== "undefined") {
window.addEventListener("storage", handleStorageChange);
}
// Cleanup the event listener on component unmount
return () => {
if (typeof window !== "undefined") {
window.removeEventListener("storage", handleStorageChange);
}
};
}, [key]);
return [localState, handleSetState];
}
export { useLocalStorage }; Hope I've helped you. |
I'm using
useLocalStorage
hook from@uidotdev/usehooks
. Even though HomePage.tsx file is set to "use client", I'm getting the following error:Even though the readme states that the hooks are "server-safe", I keep getting this error.
The minimal reproduceable code can be found at: https://github.com/Nusab19/mwc-useLocalStorageHook
The responsible code:
I also posted a question in stackoverflow
The text was updated successfully, but these errors were encountered: