move local storage state initialization to useEffect to avoid hydrati…

…on errors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "anzol",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

src/hooks/useLocalStorage.ts

@@ -28,24 +28,28 @@ export interface LocalStorageOptions {
  *     return <input type="text" value={value ?? ""} onChange={(e) => setValue(e.target.value)} />;
  * }
  * ```
-*/
+ */
 function useLocalStorage(key: string, {
     initialValue,
     propagateChanges = false,
     listenForChanges = false,
 }: LocalStorageOptions = {}): [string | null, Dispatch<SetStateAction<string | null>>] {
 
-    const [value, setValue] = useState(() => {
-        if (typeof window === "undefined") return null;
-        const storedValue = localStorage.getItem(key);
-        if (storedValue) return storedValue;
-        const init = initialValue || null;
-        if (init) localStorage.setItem(key, init);
-        return init;
-    });
+    const [value, setValue] = useState<string | null>(null);
     const [blockUpdates, setBlockUpdates] = useState(true);
     const id = useId();
 
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+        setValue(() => {
+            const storedValue = localStorage.getItem(key);
+            if (storedValue) return storedValue;
+            const init = initialValue || null;
+            if (init) localStorage.setItem(key, init);
+            return init;
+        });
+    }, [key, initialValue]);
+
     useEffect(() => {
         if (typeof window === "undefined") return;
         if (!blockUpdates) {

tests/useLocalStorage.test.ts

@@ -23,6 +23,11 @@ async function renderUseLocalStorage({
 }
 
 describe("useLocalStorage", () => {
+
+    afterEach(() => {
+        localStorage.clear();
+    });
+
     test("should set a default value when local storage item doesn't exist", async () => {
         const { result } = await renderUseLocalStorage({ initialKey: "animal", initialOptions: { initialValue: "Bear" }});
         expect(result.current[0]).toBe("Bear");