fix(storage): don't write the initial value over stored data on mount

lib/useLocalStorage.ts

@@ -1,14 +1,14 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export function useLocalStorage<T>(
   key: string,
   initial: T
 ): [T, (value: T | ((prev: T) => T)) => void, () => void, Error | null] {
   const [value, setValue] = useState<T>(initial);
   const [persistError, setPersistError] = useState<Error | null>(null);
-  const loadedRef = useRef(false);
+  const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
     try {
@@ -17,11 +17,13 @@ export function useLocalStorage<T>(
     } catch {
       /* ignore */
     }
-    loadedRef.current = true;
+    setLoaded(true);
   }, [key]);
 
+  // Wait for the render that has the stored value, or the initial value
+  // would be written over it on mount.
   useEffect(() => {
-    if (!loadedRef.current) return;
+    if (!loaded) return;
     try {
       window.localStorage.setItem(key, JSON.stringify(value));
       setPersistError(null);
@@ -30,7 +32,7 @@ export function useLocalStorage<T>(
       // the user instead of silently dropping their data.
       setPersistError(e instanceof Error ? e : new Error("Storage write failed"));
     }
-  }, [key, value]);
+  }, [key, value, loaded]);
 
   const reset = useCallback(() => {
     try {