From 5c15659a34c8304c534daba4a7813e6d93f9b2b6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 24 Jul 2024 11:17:32 -0600
Subject: [PATCH] Ensure that persisted state is kept in sync (#12596)

---
 web/src/hooks/use-overlay-state.tsx | 19 ++++++++++++-------
 web/src/hooks/use-persistence.ts    |  1 -
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
index 573598b0c..0db339c9b 100644
--- a/web/src/hooks/use-overlay-state.tsx
+++ b/web/src/hooks/use-overlay-state.tsx
@@ -38,12 +38,22 @@ export function usePersistedOverlayState<S extends string>(
   (value: S | undefined, replace?: boolean) => void,
   () => void,
 ] {
-  const [persistedValue, setPersistedValue, , deletePersistedValue] =
-    usePersistence<S>(key, defaultValue);
   const location = useLocation();
   const navigate = useNavigate();
   const currentLocationState = useMemo(() => location.state, [location]);
 
+  // currently selected value
+
+  const overlayStateValue = useMemo<S | undefined>(
+    () => location.state && location.state[key],
+    [location, key],
+  );
+
+  // saved value from previous session
+
+  const [persistedValue, setPersistedValue, , deletePersistedValue] =
+    usePersistence<S>(key, overlayStateValue);
+
   const setOverlayStateValue = useCallback(
     (value: S | undefined, replace: boolean = false) => {
       setPersistedValue(value);
@@ -56,11 +66,6 @@ export function usePersistedOverlayState<S extends string>(
     [key, currentLocationState, navigate],
   );
 
-  const overlayStateValue = useMemo<S | undefined>(
-    () => location.state && location.state[key],
-    [location, key],
-  );
-
   return [
     overlayStateValue ?? persistedValue ?? defaultValue,
     setOverlayStateValue,
diff --git a/web/src/hooks/use-persistence.ts b/web/src/hooks/use-persistence.ts
index 8762c1970..6478769a9 100644
--- a/web/src/hooks/use-persistence.ts
+++ b/web/src/hooks/use-persistence.ts
@@ -34,7 +34,6 @@ export function usePersistence<S>(
 
   useEffect(() => {
     setLoaded(false);
-    setInternalValue(defaultValue);
 
     async function load() {
       const value = await getData(key);